{
  "id": "color_workbench",
  "type": "module",
  "version": "1.2",
  "context": {
    "layout": "phone",
    "title": "Color Workbench",
    "icon": "🎨",
    "hexDigits": [
      "0",
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "A",
      "B",
      "C",
      "D",
      "E",
      "F"
    ],
    "hexMap": {
      "0": 0,
      "1": 1,
      "2": 2,
      "3": 3,
      "4": 4,
      "5": 5,
      "6": 6,
      "7": 7,
      "8": 8,
      "9": 9,
      "A": 10,
      "B": 11,
      "C": 12,
      "D": 13,
      "E": 14,
      "F": 15
    },
    "trimmed": "{{ upper(trim(${hex})) }}",
    "code": "{{ hasPrefix(@{trimmed}, '#') ? suffix(@{trimmed}, count(@{trimmed}) - 1) : @{trimmed} }}",
    "characters": "{{ map(range(6), prefix(suffix(@{code}, 6 - @{item}), 1)) }}",
    "badDigits": "{{ sum(map(@{characters}, contains(@{hexMap}, @{item}) ? 0 : 1)) }}",
    "valid": "{{ count(@{code}) == 6 && @{badDigits} == 0 }}",
    "digits": "{{ @{valid} ? map(@{characters}, @{hexMap[@{item}]}) : [8,0,8,0,8,0] }}",
    "decoded": "{{ map([@{digits}], {'r': @{item}[0] * 16 + @{item}[1], 'g': @{item}[2] * 16 + @{item}[3], 'b': @{item}[4] * 16 + @{item}[5]}) }}",
    "red": "{{ first(@{decoded}).r }}",
    "green": "{{ first(@{decoded}).g }}",
    "blue": "{{ first(@{decoded}).b }}",
    "baseHex": "{{ @{valid} ? '#' + @{code} : '#808080' }}",
    "channelBounds": "{{ map(@{decoded}, @{item} + {'hi': max([@{item.r}, @{item.g}, @{item.b}]), 'lo': min([@{item.r}, @{item.g}, @{item.b}])}) }}",
    "channelGeometry": "{{ map(@{channelBounds}, @{item} + {'span': @{item.hi} - @{item.lo}, 'sum': @{item.hi} + @{item.lo}, 'lightness': (@{item.hi} + @{item.lo}) / 510}) }}",
    "baseGeometry": "{{ map(@{channelGeometry}, @{item} + {'s': (@{item.span} == 0 ? 0 : max([0.35, @{item.span} / (@{item.sum} <= 255 ? @{item.sum} : 510 - @{item.sum})])), 'hr': (@{item.span} == 0 ? 0 : (@{item.r} - @{item.lo}) / @{item.span}), 'hg': (@{item.span} == 0 ? 0 : (@{item.g} - @{item.lo}) / @{item.span}), 'hb': (@{item.span} == 0 ? 0 : (@{item.b} - @{item.lo}) / @{item.span})}) }}",
    "stops": "{{ first(map(@{baseGeometry}, ${mode} == 'Tonal' ? [@{item} + {'delta': -0.36, 'exact': false, 'flip': false, 'label': 'Tone −2'}, @{item} + {'delta': -0.18, 'exact': false, 'flip': false, 'label': 'Tone −1'}, @{item} + {'delta': 0, 'exact': true, 'flip': false, 'label': 'Base'}, @{item} + {'delta': 0.18, 'exact': false, 'flip': false, 'label': 'Tone +1'}, @{item} + {'delta': 0.36, 'exact': false, 'flip': false, 'label': 'Tone +2'}] : [@{item} + {'delta': -0.36, 'exact': false, 'flip': false, 'label': 'Anchor'}, @{item} + {'delta': 0, 'exact': true, 'flip': false, 'label': 'Base'}, @{item} + {'delta': -0.18, 'exact': false, 'flip': true, 'label': 'Complement'}, @{item} + {'delta': 0.18, 'exact': false, 'flip': true, 'label': 'Accent'}, @{item} + {'delta': 0.36, 'exact': false, 'flip': false, 'label': 'Canvas'}])) }}",
    "relativeStops": "{{ map(@{stops}, @{item} + {'target': (@{item.exact} ? @{item.lightness} : 0.05 + ((@{item.lightness} - 0.05 + 0.9 + @{item.delta}) % 0.9))}) }}",
    "chromaStops": "{{ map(@{relativeStops}, @{item} + {'chroma': 2 * min([@{item.target}, 1 - @{item.target}]) * @{item.s}}) }}",
    "balancedStops": "{{ map(@{chromaStops}, @{item} + {'offset': @{item.target} - @{item.chroma} / 2}) }}",
    "rgbColors": "{{ map(@{balancedStops}, {'r': (@{item.exact} ? @{item.r} : cast(((@{item.flip} ? 1 - @{item.hr} : @{item.hr}) * @{item.chroma} + @{item.offset}) * 255 + 0.5, 'int')), 'g': (@{item.exact} ? @{item.g} : cast(((@{item.flip} ? 1 - @{item.hg} : @{item.hg}) * @{item.chroma} + @{item.offset}) * 255 + 0.5, 'int')), 'b': (@{item.exact} ? @{item.b} : cast(((@{item.flip} ? 1 - @{item.hb} : @{item.hb}) * @{item.chroma} + @{item.offset}) * 255 + 0.5, 'int')), 'label': @{item.label}}) }}",
    "linearColors": "{{ map(@{rgbColors}, @{item} + {'lr': (@{item.r} / 255 <= 0.04045 ? @{item.r} / 3294.6 : pow((@{item.r} / 255 + 0.055) / 1.055, 2.4)), 'lg': (@{item.g} / 255 <= 0.04045 ? @{item.g} / 3294.6 : pow((@{item.g} / 255 + 0.055) / 1.055, 2.4)), 'lb': (@{item.b} / 255 <= 0.04045 ? @{item.b} / 3294.6 : pow((@{item.b} / 255 + 0.055) / 1.055, 2.4))}) }}",
    "hexParts": "{{ map(@{linearColors}, @{item} + {'rh': cast(@{item.r} / 16, 'int'), 'rl': @{item.r} % 16, 'gh': cast(@{item.g} / 16, 'int'), 'gl': @{item.g} % 16, 'bh': cast(@{item.b} / 16, 'int'), 'bl': @{item.b} % 16}) }}",
    "measured": "{{ map(@{hexParts}, @{item} + {'lum': 0.2126 * @{item.lr} + 0.7152 * @{item.lg} + 0.0722 * @{item.lb}, 'hex': '#' + @{hexDigits[@{item.rh}]} + @{hexDigits[@{item.rl}]} + @{hexDigits[@{item.gh}]} + @{hexDigits[@{item.gl}]} + @{hexDigits[@{item.bh}]} + @{hexDigits[@{item.bl}]}}) }}",
    "colors": "{{ map(@{measured}, {'hex': @{item.hex}, 'label': @{item.label}, 'ink': (@{item.lum} > 0.1791287847 ? 'black' : 'white'), 'ratio': (@{item.lum} > 0.1791287847 ? (@{item.lum} + 0.05) / 0.05 : 1.05 / (@{item.lum} + 0.05))}) }}",
    "baseLinear": "{{ map(@{decoded}, {'lr': (@{item.r} / 255 <= 0.04045 ? @{item.r} / 3294.6 : pow((@{item.r} / 255 + 0.055) / 1.055, 2.4)), 'lg': (@{item.g} / 255 <= 0.04045 ? @{item.g} / 3294.6 : pow((@{item.g} / 255 + 0.055) / 1.055, 2.4)), 'lb': (@{item.b} / 255 <= 0.04045 ? @{item.b} / 3294.6 : pow((@{item.b} / 255 + 0.055) / 1.055, 2.4))}) }}",
    "baseLuminance": "{{ map(@{baseLinear}, 0.2126 * @{item.lr} + 0.7152 * @{item.lg} + 0.0722 * @{item.lb}) }}",
    "baseEntry": "{{ first(map(@{baseLuminance}, {'ink': (@{item} > 0.1791287847 ? 'black' : 'white'), 'ratio': (@{item} > 0.1791287847 ? (@{item} + 0.05) / 0.05 : 1.05 / (@{item} + 0.05))})) }}",
    "saveBody": "{{ {'name': (empty(trim(${name})) ? @{baseHex} + ' · ' + ${mode} : trim(${name})), 'base': @{baseHex}, 'mode': ${mode}, 'colors': @{colors}} }}"
  },
  "state": {
    "hex": "#587D71",
    "mode": "Tonal",
    "name": "",
    "focused": "",
    "saved": [],
    "editingId": "",
    "pendingDelete": "",
    "showDelete": false,
    "busy": false,
    "loading": true,
    "status": "",
    "storageError": ""
  },
  "dependencies": [
    {
      "repository": {
        "local": {
          "id": "color_workbench_palettes_v1",
          "config": {}
        }
      }
    },
    {
      "service": {
        "audio": {
          "id": "color_audio"
        }
      }
    },
    {
      "action": {
        "state": {
          "id": "reload_palettes",
          "input": {
            "loading": true,
            "storageError": ""
          },
          "output": {
            "success": [
              {
                "repo": {
                  "id": "read_palettes",
                  "input": {
                    "repositoryId": "color_workbench_palettes_v1",
                    "operation": "read",
                    "params": {
                      "collection": "palettes"
                    }
                  },
                  "output": {
                    "success": [
                      {
                        "state": {
                          "id": "hydrate_palettes",
                          "input": {
                            "saved": "{{ @{read_palettes} ?? [] }}",
                            "loading": false
                          }
                        }
                      }
                    ],
                    "failure": [
                      {
                        "state": {
                          "id": "load_failed",
                          "input": {
                            "loading": false,
                            "storageError": "Saved palettes could not be loaded. Try again."
                          }
                        }
                      }
                    ]
                  }
                }
              }
            ]
          }
        }
      }
    },
    {
      "action": {
        "state": {
          "id": "save_palette",
          "input": {
            "busy": true,
            "focused": "",
            "status": "Saving palette…"
          },
          "output": {
            "success": [
              {
                "repo": {
                  "id": "write_palette",
                  "input": {
                    "repositoryId": "color_workbench_palettes_v1",
                    "operation": "create",
                    "params": "{{ {'collection': 'palettes', 'body': @{saveBody}, 'rewrite': true} + (empty(${editingId}) ? {} : {'documentId': ${editingId}}) }}"
                  },
                  "output": {
                    "success": [
                      {
                        "state": {
                          "id": "saved_ok",
                          "input": {
                            "busy": false,
                            "editingId": "",
                            "name": "",
                            "focused": "",
                            "status": "Palette saved on this device."
                          }
                        }
                      },
                      {
                        "template": {
                          "id": "reload_after_save",
                          "input": "reload_palettes"
                        }
                      },
                      {
                        "service": {
                          "id": "save_haptic",
                          "input": {
                            "serviceId": "color_audio",
                            "params": {
                              "haptic": "success"
                            }
                          }
                        }
                      }
                    ],
                    "failure": [
                      {
                        "state": {
                          "id": "save_failed",
                          "input": {
                            "busy": false,
                            "status": "Could not save. Your colors are still here — try Save again."
                          }
                        }
                      }
                    ]
                  }
                }
              }
            ]
          }
        }
      }
    }
  ],
  "children": [
    {
      "id": "workbench_scroll",
      "type": "scroll",
      "style": {
        "scroll": {
          "dismissesKeyboard": "interactively"
        },
        "modal": {
          "alert": {
            "title": "Remove this palette?",
            "message": "This removes the saved palette from this device.",
            "isPresented": "${showDelete}",
            "actions": [
              {
                "id": "confirm_remove",
                "type": "button",
                "context": {
                  "_label": "Remove palette",
                  "_image": "sf://trash"
                },
                "events": {
                  "onTap": [
                    {
                      "state": {
                        "id": "begin_remove",
                        "input": {
                          "showDelete": false,
                          "busy": true,
                          "focused": ""
                        },
                        "output": {
                          "success": [
                            {
                              "repo": {
                                "id": "remove_palette",
                                "input": {
                                  "repositoryId": "color_workbench_palettes_v1",
                                  "operation": "delete",
                                  "params": {
                                    "collection": "palettes",
                                    "documentId": "${pendingDelete}"
                                  }
                                },
                                "output": {
                                  "success": [
                                    {
                                      "state": {
                                        "id": "removed_ok",
                                        "input": {
                                          "busy": false,
                                          "editingId": "{{ ${editingId} == ${pendingDelete} ? '' : ${editingId} }}",
                                          "status": "Palette removed."
                                        }
                                      }
                                    },
                                    {
                                      "template": {
                                        "id": "reload_after_remove",
                                        "input": "reload_palettes"
                                      }
                                    },
                                    {
                                      "service": {
                                        "id": "remove_haptic",
                                        "input": {
                                          "serviceId": "color_audio",
                                          "params": {
                                            "haptic": "error"
                                          }
                                        }
                                      }
                                    }
                                  ],
                                  "failure": [
                                    {
                                      "state": {
                                        "id": "remove_failed",
                                        "input": {
                                          "busy": false,
                                          "status": "Could not remove the palette. Try its Remove button again."
                                        }
                                      }
                                    }
                                  ]
                                }
                              }
                            }
                          ]
                        }
                      }
                    }
                  ]
                }
              },
              {
                "id": "keep_palette",
                "type": "button",
                "context": {
                  "_label": "Keep palette"
                },
                "events": {
                  "onTap": [
                    {
                      "state": {
                        "id": "dismiss_remove",
                        "input": {
                          "showDelete": false
                        }
                      }
                    }
                  ]
                }
              }
            ]
          }
        }
      },
      "children": [
        {
          "id": "workbench_stack",
          "type": "vstack",
          "context": {
            "_spacing": 20,
            "_alignment": "leading"
          },
          "style": {
            "layout": {
              "padding": {
                "top": 12,
                "bottom": 32,
                "leading": 20,
                "trailing": 20
              },
              "maxWidth": "infinity"
            }
          },
          "children": [
            {
              "id": "color_hero",
              "type": "vstack",
              "context": {
                "_spacing": 8,
                "_alignment": "leading"
              },
              "style": {
                "layout": {
                  "padding": 22,
                  "maxWidth": "infinity",
                  "minHeight": 170,
                  "alignment": "leading"
                },
                "common": {
                  "background": "@{baseHex}",
                  "foreground": "@{baseEntry.ink}",
                  "cornerRadius": 24
                },
                "shadow": {
                  "color": {
                    "color": "black",
                    "opacity": 0.15
                  },
                  "radius": 12,
                  "y": 5
                }
              },
              "children": [
                {
                  "id": "hero_caption",
                  "type": "label",
                  "context": {
                    "_title": "CURRENT COLOR",
                    "_image": "sf://eyedropper"
                  },
                  "style": {
                    "common": {
                      "font": "caption",
                      "foreground": "@{baseEntry.ink}"
                    }
                  }
                },
                {
                  "id": "hero_hex",
                  "type": "text",
                  "context": {
                    "_text": "{{ @{valid} ? @{baseHex} : '—' }}"
                  },
                  "style": {
                    "common": {
                      "font": {
                        "kind": "largeTitle",
                        "weight": "bold"
                      },
                      "foreground": "@{baseEntry.ink}"
                    }
                  }
                },
                {
                  "id": "hero_rgb",
                  "type": "text",
                  "context": {
                    "_text": "{{ @{valid} ? 'RGB  ' + @{red} + ' / ' + @{green} + ' / ' + @{blue} : 'Enter a six-digit hex color below' }}"
                  },
                  "style": {
                    "common": {
                      "font": "subheadline",
                      "foreground": "@{baseEntry.ink}"
                    }
                  }
                },
                {
                  "id": "contrast_line",
                  "type": "conditional",
                  "context": {
                    "_condition": "@{valid}",
                    "_trueComponent": {
                      "id": "contrast_content",
                      "type": "hstack",
                      "context": {
                        "_spacing": 4
                      },
                      "children": [
                        {
                          "id": "contrast_label",
                          "type": "text",
                          "context": {
                            "_text": "{{ @{baseEntry.ink} == 'black' ? 'Black text · ' : 'White text · ' }}"
                          },
                          "style": {
                            "common": {
                              "font": "caption",
                              "foreground": "@{baseEntry.ink}"
                            }
                          }
                        },
                        {
                          "id": "contrast_ratio",
                          "type": "text",
                          "context": {
                            "_text": "@{baseEntry.ratio}",
                            "_format": {
                              "number": {
                                "style": "decimal",
                                "minimumFractionDigits": 2,
                                "maximumFractionDigits": 2
                              }
                            }
                          },
                          "style": {
                            "common": {
                              "font": "caption",
                              "foreground": "@{baseEntry.ink}"
                            }
                          }
                        },
                        {
                          "id": "contrast_units",
                          "type": "text",
                          "context": {
                            "_text": ":1 contrast"
                          },
                          "style": {
                            "common": {
                              "font": "caption",
                              "foreground": "@{baseEntry.ink}"
                            }
                          }
                        }
                      ]
                    }
                  }
                }
              ]
            },
            {
              "id": "color_input",
              "type": "vstack",
              "context": {
                "_spacing": 12,
                "_alignment": "leading",
                "quickColors": [
                  "#587D71",
                  "#4263EB",
                  "#8C52CC",
                  "#D65A4A",
                  "#D9A441",
                  "#252A34"
                ]
              },
              "style": {
                "layout": {
                  "padding": 18,
                  "maxWidth": "infinity"
                },
                "common": {
                  "background": {
                    "material": "thin"
                  },
                  "foreground": "onSurface",
                  "cornerRadius": 20
                },
                "shadow": {
                  "color": {
                    "color": "black",
                    "opacity": 0.06
                  },
                  "radius": 8,
                  "y": 3
                }
              },
              "children": [
                {
                  "id": "input_heading",
                  "type": "label",
                  "context": {
                    "_title": "Change base color",
                    "_image": "sf://slider.horizontal.3"
                  },
                  "style": {
                    "common": {
                      "font": "headline",
                      "foreground": "onSurface"
                    }
                  }
                },
                {
                  "id": "base_color_instructions",
                  "type": "text",
                  "context": {
                    "_text": "Edit the hex code below, tap a quick color, or choose a palette swatch. The preview and palette update instantly."
                  },
                  "style": {
                    "common": {
                      "font": "subheadline",
                      "foreground": "onSurface"
                    }
                  }
                },
                {
                  "id": "hex_field",
                  "type": "textfield",
                  "context": {
                    "_label": "Base color hex · e.g. #587D71",
                    "_text": "${hex}",
                    "_focused": "${focused}",
                    "_keyboard": "asciiCapable",
                    "_debounce": 0.15
                  },
                  "style": {
                    "textField": {
                      "standard": "roundedBorder",
                      "autocorrectionDisabled": true,
                      "autocapitalization": "characters",
                      "submitLabel": "done"
                    },
                    "layout": {
                      "minHeight": 44
                    },
                    "common": {
                      "foreground": "onSurface",
                      "background": "{{ @{valid} ? {'color':'clear'} : {'color':'red','opacity':0.12} }}",
                      "cornerRadius": 8
                    }
                  },
                  "events": {
                    "onSubmit": [
                      {
                        "state": {
                          "id": "finish_hex",
                          "input": {
                            "focused": ""
                          }
                        }
                      }
                    ]
                  }
                },
                {
                  "id": "hex_help",
                  "type": "text",
                  "context": {
                    "_text": "{{ @{valid} ? 'Tap the field to edit. Use 6 hex digits (0–9, A–F); # is optional.' : 'Use exactly 6 digits: 0–9 or A–F (for example #587D71).' }}"
                  },
                  "style": {
                    "common": {
                      "font": "caption",
                      "foreground": "{{ @{valid} ? 'secondary' : 'red' }}"
                    }
                  }
                },
                {
                  "id": "quick_colors_heading",
                  "type": "label",
                  "context": {
                    "_title": "Quick colors · tap to set base",
                    "_image": "sf://paintpalette"
                  },
                  "style": {
                    "common": {
                      "font": "subheadline",
                      "foreground": "onSurface"
                    }
                  }
                },
                {
                  "id": "quick_row",
                  "type": "hstack",
                  "context": {
                    "_spacing": 6
                  },
                  "children": [
                    {
                      "id": "quick_colors",
                      "type": "dynamic",
                      "context": {
                        "_data": "@{quickColors}"
                      },
                      "prototype": {
                        "id": "quick_color",
                        "type": "button",
                        "style": {
                          "button": {
                            "standard": "plain"
                          },
                          "layout": {
                            "maxWidth": "infinity",
                            "minWidth": 44,
                            "height": 44
                          },
                          "common": {
                            "background": "@{item}",
                            "foreground": "white",
                            "cornerRadius": 12
                          },
                          "accessibility": {
                            "label": "{{ 'Use ' + @{item} }}"
                          }
                        },
                        "children": [
                          {
                            "id": "quick_mark",
                            "type": "image",
                            "context": {
                              "_source": "{{ @{baseHex} == @{item} ? 'sf://checkmark.circle.fill' : 'sf://circle' }}"
                            },
                            "style": {
                              "layout": {
                                "width": 20,
                                "height": 20
                              },
                              "common": {
                                "foreground": "white",
                                "background": {
                                  "color": "black",
                                  "opacity": 0.55
                                },
                                "cornerRadius": 10,
                                "opacity": "{{ @{baseHex} == @{item} ? 1 : 0 }}"
                              }
                            }
                          }
                        ],
                        "events": {
                          "onTap": [
                            {
                              "state": {
                                "id": "pick_quick",
                                "input": {
                                  "hex": "@{item}",
                                  "focused": "",
                                  "status": ""
                                }
                              }
                            },
                            {
                              "service": {
                                "id": "quick_haptic",
                                "input": {
                                  "serviceId": "color_audio",
                                  "params": {
                                    "haptic": "light"
                                  }
                                }
                              }
                            }
                          ]
                        }
                      }
                    }
                  ]
                }
              ]
            },
            {
              "id": "palette_panel",
              "type": "vstack",
              "context": {
                "_spacing": 12,
                "_alignment": "leading"
              },
              "style": {
                "layout": {
                  "padding": 18,
                  "maxWidth": "infinity"
                },
                "common": {
                  "background": "surface",
                  "foreground": "onSurface",
                  "cornerRadius": 20
                },
                "shadow": {
                  "color": {
                    "color": "black",
                    "opacity": 0.08
                  },
                  "radius": 10,
                  "y": 4
                }
              },
              "children": [
                {
                  "id": "palette_heading",
                  "type": "label",
                  "context": {
                    "_title": "Your palette",
                    "_image": "sf://paintpalette"
                  },
                  "style": {
                    "common": {
                      "font": "headline",
                      "foreground": "onSurface"
                    }
                  }
                },
                {
                  "id": "palette_mode",
                  "type": "picker",
                  "context": {
                    "_label": "Palette style",
                    "_selection": "${mode}",
                    "_options": [
                      "Tonal",
                      "Complement"
                    ]
                  },
                  "style": {
                    "picker": "segmented",
                    "layout": {
                      "minHeight": 44
                    },
                    "common": {
                      "foreground": "onSurface"
                    }
                  }
                },
                {
                  "id": "palette_explanation",
                  "type": "text",
                  "context": {
                    "_text": "{{ ${mode} == 'Tonal' ? 'Five tones shift with your base. Steps wrap from light to dark instead of fading toward black or white.' : 'Complementary hues and tone steps shift with your base. Steps wrap from light to dark; neutrals stay neutral.' }}"
                  },
                  "style": {
                    "common": {
                      "font": "caption",
                      "foreground": "secondary"
                    }
                  }
                },
                {
                  "id": "palette_hint",
                  "type": "text",
                  "context": {
                    "_text": "Tap any swatch to make it your base and regenerate the palette. ✓ marks the current base."
                  },
                  "style": {
                    "common": {
                      "font": "subheadline",
                      "foreground": "onSurface"
                    }
                  }
                },
                {
                  "id": "valid_palette",
                  "type": "conditional",
                  "context": {
                    "_condition": "@{valid}",
                    "_trueComponent": {
                      "id": "palette_swatches",
                      "type": "vstack",
                      "context": {
                        "_spacing": 6
                      },
                      "children": [
                        {
                          "id": "palette_colors",
                          "type": "dynamic",
                          "context": {
                            "_data": "@{colors}"
                          },
                          "prototype": {
                            "id": "palette_swatch",
                            "type": "button",
                            "style": {
                              "button": {
                                "standard": "plain"
                              },
                              "layout": {
                                "maxWidth": "infinity",
                                "minHeight": 50,
                                "padding": {
                                  "horizontal": 14,
                                  "vertical": 10
                                }
                              },
                              "common": {
                                "background": "@{item.hex}",
                                "foreground": "@{item.ink}",
                                "cornerRadius": 12
                              },
                              "accessibility": {
                                "label": "{{ @{item.label} + ', ' + @{item.hex} + '. Use as base color.' }}"
                              }
                            },
                            "children": [
                              {
                                "id": "swatch_content",
                                "type": "hstack",
                                "context": {
                                  "_spacing": 10
                                },
                                "children": [
                                  {
                                    "id": "swatch_details",
                                    "type": "vstack",
                                    "context": {
                                      "_spacing": 3,
                                      "_alignment": "leading"
                                    },
                                    "children": [
                                      {
                                        "id": "swatch_hex",
                                        "type": "text",
                                        "context": {
                                          "_text": "@{item.hex}"
                                        },
                                        "style": {
                                          "common": {
                                            "font": {
                                              "kind": "headline",
                                              "weight": "semibold"
                                            },
                                            "foreground": "@{item.ink}"
                                          }
                                        }
                                      },
                                      {
                                        "id": "swatch_role",
                                        "type": "text",
                                        "context": {
                                          "_text": "@{item.label}"
                                        },
                                        "style": {
                                          "common": {
                                            "font": "caption",
                                            "foreground": "@{item.ink}"
                                          }
                                        }
                                      }
                                    ]
                                  },
                                  {
                                    "id": "swatch_spacer",
                                    "type": "spacer"
                                  },
                                  {
                                    "id": "swatch_indicator",
                                    "type": "conditional",
                                    "context": {
                                      "_condition": "{{ @{item.label} == 'Base' }}",
                                      "_trueComponent": {
                                        "id": "swatch_current_base",
                                        "type": "label",
                                        "context": {
                                          "_title": "Current base",
                                          "_image": "sf://checkmark.circle.fill"
                                        },
                                        "style": {
                                          "common": {
                                            "font": {
                                              "kind": "caption",
                                              "weight": "semibold"
                                            },
                                            "foreground": "@{item.ink}"
                                          },
                                          "layout": {
                                            "padding": {
                                              "vertical": 8
                                            }
                                          }
                                        }
                                      }
                                    }
                                  }
                                ]
                              }
                            ],
                            "events": {
                              "onTap": [
                                {
                                  "state": {
                                    "id": "use_swatch",
                                    "input": {
                                      "hex": "@{item.hex}",
                                      "focused": "",
                                      "status": ""
                                    }
                                  }
                                },
                                {
                                  "service": {
                                    "id": "swatch_haptic",
                                    "input": {
                                      "serviceId": "color_audio",
                                      "params": {
                                        "haptic": "light"
                                      }
                                    }
                                  }
                                }
                              ]
                            }
                          }
                        }
                      ]
                    },
                    "_falseComponent": {
                      "id": "palette_invalid",
                      "type": "label",
                      "context": {
                        "_title": "Enter a valid hex color to see its palette.",
                        "_image": "sf://eyedropper"
                      },
                      "style": {
                        "layout": {
                          "padding": 18,
                          "minHeight": 80
                        },
                        "common": {
                          "font": "subheadline",
                          "foreground": "onSurfaceVariant",
                          "background": "surfaceVariant",
                          "cornerRadius": 12
                        }
                      }
                    }
                  }
                },
                {
                  "id": "name_field",
                  "type": "textfield",
                  "context": {
                    "_label": "Palette name · optional",
                    "_text": "${name}",
                    "_focused": "${focused}",
                    "_debounce": 0.15,
                    "_keyboard": "default"
                  },
                  "style": {
                    "textField": {
                      "standard": "roundedBorder",
                      "submitLabel": "done"
                    },
                    "layout": {
                      "minHeight": 44
                    },
                    "common": {
                      "foreground": "onSurface"
                    }
                  },
                  "events": {
                    "onSubmit": [
                      {
                        "state": {
                          "id": "finish_name",
                          "input": {
                            "focused": ""
                          }
                        }
                      }
                    ]
                  }
                },
                {
                  "id": "save_button",
                  "type": "button",
                  "context": {
                    "_label": "{{ ${busy} ? 'Working…' : (empty(${editingId}) ? 'Save palette' : 'Update palette') }}",
                    "_image": "sf://square.and.arrow.down"
                  },
                  "style": {
                    "button": {
                      "standard": {
                        "type": "borderedProminent",
                        "shape": "capsule"
                      }
                    },
                    "layout": {
                      "maxWidth": "infinity",
                      "minHeight": 48
                    },
                    "common": {
                      "disabled": "{{ !@{valid} || ${busy} }}"
                    }
                  },
                  "events": {
                    "onTap": [
                      {
                        "template": {
                          "id": "save_from_editor",
                          "input": "save_palette"
                        }
                      }
                    ]
                  }
                },
                {
                  "id": "save_blocker",
                  "type": "conditional",
                  "context": {
                    "_condition": "{{ !@{valid} }}",
                    "_trueComponent": {
                      "id": "save_blocker_text",
                      "type": "text",
                      "context": {
                        "_text": "A valid six-digit hex color is needed to save."
                      },
                      "style": {
                        "common": {
                          "font": "caption",
                          "foreground": "red"
                        }
                      }
                    }
                  }
                },
                {
                  "id": "editing_options",
                  "type": "conditional",
                  "context": {
                    "_condition": "{{ notEmpty(${editingId}) }}",
                    "_trueComponent": {
                      "id": "save_copy",
                      "type": "button",
                      "context": {
                        "_label": "Save as a new palette",
                        "_image": "sf://plus.square.on.square"
                      },
                      "style": {
                        "button": {
                          "standard": {
                            "type": "bordered",
                            "shape": "capsule"
                          }
                        },
                        "layout": {
                          "minHeight": 44,
                          "maxWidth": "infinity"
                        },
                        "common": {
                          "disabled": "{{ !@{valid} || ${busy} }}"
                        }
                      },
                      "events": {
                        "onTap": [
                          {
                            "state": {
                              "id": "copy_mode",
                              "input": {
                                "editingId": "",
                                "focused": ""
                              },
                              "output": {
                                "success": [
                                  {
                                    "template": {
                                      "id": "save_new_copy",
                                      "input": "save_palette"
                                    }
                                  }
                                ]
                              }
                            }
                          }
                        ]
                      }
                    }
                  }
                },
                {
                  "id": "save_status",
                  "type": "conditional",
                  "context": {
                    "_condition": "{{ notEmpty(${status}) }}",
                    "_trueComponent": {
                      "id": "status_text",
                      "type": "text",
                      "context": {
                        "_text": "${status}"
                      },
                      "style": {
                        "common": {
                          "font": "footnote",
                          "foreground": "onSurface"
                        },
                        "animation": {
                          "kind": "spring",
                          "value": "${status}"
                        }
                      }
                    }
                  }
                }
              ]
            },
            {
              "id": "saved_panel",
              "type": "vstack",
              "context": {
                "_spacing": 12,
                "_alignment": "leading"
              },
              "style": {
                "layout": {
                  "maxWidth": "infinity"
                },
                "animation": {
                  "kind": "spring",
                  "value": "${saved}",
                  "duration": 0.3
                }
              },
              "children": [
                {
                  "id": "saved_heading",
                  "type": "label",
                  "context": {
                    "_title": "Saved on this device",
                    "_image": "sf://square.stack.3d.up"
                  },
                  "style": {
                    "common": {
                      "font": "headline",
                      "foreground": "primary"
                    }
                  }
                },
                {
                  "id": "library_loading",
                  "type": "conditional",
                  "context": {
                    "_condition": "${loading}",
                    "_trueComponent": {
                      "id": "library_spinner",
                      "type": "progress",
                      "context": {
                        "_label": "Loading saved palettes…"
                      },
                      "style": {
                        "layout": {
                          "padding": 20,
                          "maxWidth": "infinity"
                        }
                      }
                    }
                  }
                },
                {
                  "id": "library_error",
                  "type": "conditional",
                  "context": {
                    "_condition": "{{ notEmpty(${storageError}) }}",
                    "_trueComponent": {
                      "id": "library_error_card",
                      "type": "vstack",
                      "context": {
                        "_spacing": 10,
                        "_alignment": "leading"
                      },
                      "style": {
                        "layout": {
                          "padding": 18,
                          "maxWidth": "infinity"
                        },
                        "common": {
                          "background": "surface",
                          "foreground": "onSurface",
                          "cornerRadius": 18
                        }
                      },
                      "children": [
                        {
                          "id": "library_error_label",
                          "type": "label",
                          "context": {
                            "_title": "${storageError}",
                            "_image": "sf://exclamationmark.triangle"
                          },
                          "style": {
                            "common": {
                              "font": "footnote",
                              "foreground": "onSurface"
                            }
                          }
                        },
                        {
                          "id": "retry_library",
                          "type": "button",
                          "context": {
                            "_label": "Try again",
                            "_image": "sf://arrow.clockwise"
                          },
                          "style": {
                            "button": {
                              "standard": {
                                "type": "bordered",
                                "shape": "capsule"
                              }
                            },
                            "layout": {
                              "minHeight": 44
                            }
                          },
                          "events": {
                            "onTap": [
                              {
                                "template": {
                                  "id": "retry_read",
                                  "input": "reload_palettes"
                                }
                              }
                            ]
                          }
                        }
                      ]
                    }
                  }
                },
                {
                  "id": "library_empty",
                  "type": "conditional",
                  "context": {
                    "_condition": "{{ !${loading} && empty(${storageError}) && empty(${saved}) }}",
                    "_trueComponent": {
                      "id": "library_empty_card",
                      "type": "vstack",
                      "context": {
                        "_spacing": 10,
                        "_alignment": "leading"
                      },
                      "style": {
                        "layout": {
                          "padding": 20,
                          "maxWidth": "infinity",
                          "minHeight": 130
                        },
                        "common": {
                          "background": {
                            "gradient": {
                              "linear": {
                                "colors": [
                                  "#243E37",
                                  "#394557"
                                ],
                                "startPoint": "topLeading",
                                "endPoint": "bottomTrailing"
                              }
                            }
                          },
                          "foreground": "white",
                          "cornerRadius": 20
                        },
                        "shadow": {
                          "color": {
                            "color": "black",
                            "opacity": 0.12
                          },
                          "radius": 10,
                          "y": 4
                        }
                      },
                      "children": [
                        {
                          "id": "empty_icon",
                          "type": "image",
                          "context": {
                            "_source": "sf://square.stack.3d.up"
                          },
                          "style": {
                            "layout": {
                              "width": 30,
                              "height": 30
                            },
                            "common": {
                              "foreground": "white"
                            }
                          }
                        },
                        {
                          "id": "empty_title",
                          "type": "text",
                          "context": {
                            "_text": "Keep your next color direction."
                          },
                          "style": {
                            "common": {
                              "font": "headline",
                              "foreground": "white"
                            }
                          }
                        },
                        {
                          "id": "empty_description",
                          "type": "text",
                          "context": {
                            "_text": "Use Save palette above to start a personal collection."
                          },
                          "style": {
                            "common": {
                              "font": "footnote",
                              "foreground": "white"
                            }
                          }
                        }
                      ]
                    }
                  }
                },
                {
                  "id": "saved_palettes",
                  "type": "dynamic",
                  "context": {
                    "_data": "${saved}"
                  },
                  "prototype": {
                    "id": "saved_palette_card",
                    "type": "vstack",
                    "context": {
                      "_spacing": 10,
                      "_alignment": "leading"
                    },
                    "style": {
                      "layout": {
                        "padding": 18,
                        "maxWidth": "infinity"
                      },
                      "common": {
                        "background": "surface",
                        "foreground": "onSurface",
                        "cornerRadius": 20
                      },
                      "shadow": {
                        "color": {
                          "color": "black",
                          "opacity": 0.07
                        },
                        "radius": 8,
                        "y": 3
                      }
                    },
                    "children": [
                      {
                        "id": "saved_name",
                        "type": "label",
                        "context": {
                          "_title": "@{item.name}",
                          "_image": "sf://paintpalette"
                        },
                        "style": {
                          "common": {
                            "font": "headline",
                            "foreground": "onSurface"
                          }
                        }
                      },
                      {
                        "id": "saved_mode",
                        "type": "text",
                        "context": {
                          "_text": "{{ @{item.base} + ' · ' + @{item.mode} }}"
                        },
                        "style": {
                          "common": {
                            "font": "caption",
                            "foreground": "secondary"
                          }
                        }
                      },
                      {
                        "id": "saved_strip",
                        "type": "hstack",
                        "context": {
                          "_spacing": 4
                        },
                        "children": [
                          {
                            "id": "saved_strip_colors",
                            "type": "dynamic",
                            "context": {
                              "_data": "@{item.colors}"
                            },
                            "prototype": {
                              "id": "saved_strip_color",
                              "type": "vstack",
                              "style": {
                                "layout": {
                                  "height": 32,
                                  "maxWidth": "infinity"
                                },
                                "common": {
                                  "background": "@{item.hex}",
                                  "foreground": "@{item.ink}",
                                  "cornerRadius": 6
                                },
                                "accessibility": {
                                  "label": "@{item.hex}"
                                }
                              },
                              "children": []
                            }
                          }
                        ]
                      },
                      {
                        "id": "loaded_hint",
                        "type": "conditional",
                        "context": {
                          "_condition": "{{ ${editingId} == @{item.documentId} }}",
                          "_trueComponent": {
                            "id": "loaded_hint_text",
                            "type": "label",
                            "context": {
                              "_title": "Loaded in the editor above",
                              "_image": "sf://checkmark.circle.fill"
                            },
                            "style": {
                              "common": {
                                "font": "caption",
                                "foreground": "onSurface"
                              }
                            }
                          }
                        }
                      },
                      {
                        "id": "saved_actions",
                        "type": "hstack",
                        "context": {
                          "_spacing": 12
                        },
                        "children": [
                          {
                            "id": "edit_palette",
                            "type": "button",
                            "context": {
                              "_label": "Edit palette",
                              "_image": "sf://slider.horizontal.3"
                            },
                            "style": {
                              "button": {
                                "standard": {
                                  "type": "bordered",
                                  "shape": "capsule"
                                }
                              },
                              "layout": {
                                "minHeight": 44
                              }
                            },
                            "events": {
                              "onTap": [
                                {
                                  "state": {
                                    "id": "load_for_edit",
                                    "input": {
                                      "hex": "@{item.base}",
                                      "mode": "@{item.mode}",
                                      "name": "@{item.name}",
                                      "editingId": "@{item.documentId}",
                                      "focused": "",
                                      "status": "Editing a saved palette. Update it or save a new copy."
                                    }
                                  }
                                },
                                {
                                  "service": {
                                    "id": "edit_haptic",
                                    "input": {
                                      "serviceId": "color_audio",
                                      "params": {
                                        "haptic": "light"
                                      }
                                    }
                                  }
                                }
                              ]
                            }
                          },
                          {
                            "id": "saved_action_space",
                            "type": "spacer"
                          },
                          {
                            "id": "remove_button",
                            "type": "button",
                            "context": {
                              "_label": "{{ ${busy} ? 'Working…' : 'Remove' }}",
                              "_image": "sf://trash"
                            },
                            "style": {
                              "button": {
                                "standard": {
                                  "type": "bordered",
                                  "shape": "capsule"
                                }
                              },
                              "layout": {
                                "minHeight": 44
                              },
                              "common": {
                                "tint": "red",
                                "disabled": "${busy}"
                              }
                            },
                            "events": {
                              "onTap": [
                                {
                                  "state": {
                                    "id": "ask_remove",
                                    "input": {
                                      "pendingDelete": "@{item.documentId}",
                                      "showDelete": true,
                                      "focused": ""
                                    }
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      }
                    ]
                  }
                }
              ]
            }
          ]
        }
      ],
      "events": {
        "onRefresh": [
          {
            "template": {
              "id": "refresh_saved_library",
              "input": "reload_palettes"
            }
          }
        ]
      }
    }
  ],
  "events": {
    "onAppear": [
      {
        "template": {
          "id": "initial_library_load",
          "input": "reload_palettes"
        }
      }
    ]
  }
}