@motion-proto/live-tokens 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/.claude/skills/live-tokens-add-component/SKILL.md +488 -0
  2. package/README.md +34 -0
  3. package/package.json +5 -2
  4. package/src/editor/component-editor/index.ts +16 -1
  5. package/src/editor/component-editor/registry.ts +103 -26
  6. package/src/editor/component-editor/scaffolding/ComponentsTab.svelte +2 -2
  7. package/src/editor/component-editor/scaffolding/componentSources.ts +3 -3
  8. package/src/editor/component-editor/scaffolding/defaultSections.ts +15 -10
  9. package/src/editor/core/components/componentConfigKeys.ts +14 -3
  10. package/src/editor/core/themes/slices/components.ts +9 -0
  11. package/src/editor/index.ts +10 -1
  12. package/src/editor/pages/ComponentEditorPage.svelte +53 -3
  13. package/src/editor/pages/EditorShell.svelte +53 -3
  14. package/src/system/components/Dialog.svelte +24 -4
  15. package/src/system/components/SectionDivider.svelte +117 -43
package/src/system/components/SectionDivider.svelte CHANGED
@@ -71,51 +71,125 @@
71
71
  });
72
72
  </script>
73
73
 
74
- <div class="section-divider variant-{variant}">
75
- <span class="divider-eyebrow">{eyebrow ?? ''}</span>
76
- <span class="sd-hairline sd-hairline--row sd-hairline-above-label" aria-hidden="true"></span>
77
- <div class="title-row">
78
- <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
79
- <span class="title-inline">
80
- <svg
81
- bind:this={svgEl}
82
- class="divider-label"
83
- width={svgW || undefined}
84
- height={svgH || undefined}
85
- viewBox={svgW && svgH ? `${svgX} ${svgY} ${svgW} ${svgH}` : undefined}
86
- aria-label={title}
87
- role="img"
88
- >
89
- <defs>
90
- <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
91
- <feMorphology in="SourceAlpha" operator="dilate" radius={outlineRadius} result="dilated" />
92
- <feFlood flood-color={outlineColor} result="color" />
93
- <feComposite in="color" in2="dilated" operator="in" result="outline" />
94
- <feComposite in="SourceGraphic" in2="outline" operator="over" />
95
- </filter>
96
- </defs>
97
- <text
98
- bind:this={svgTextEl}
99
- x="0"
100
- y="0"
101
- dominant-baseline="hanging"
102
- filter="url(#{filterId})"
103
- >{title}</text>
104
- </svg>
105
- </span>
106
- <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
74
+ <!-- In dev, render every variant-controlled block so the editor can flip
75
+ intrinsics live; CSS hides the unused ones via container style queries.
76
+ In prod, Vite folds `import.meta.env.DEV` to `false` and strips the dev
77
+ branch; the else branch's PRUNE_FOR markers are resolved by the
78
+ `buildPruneReplace` preprocessor (vite-plugin/pruneMarkers/) into static
79
+ `{#if variant === ...}` guards driven by the production component-config. -->
80
+ {#if import.meta.env.DEV}
81
+ <div class="section-divider variant-{variant}">
82
+ <span class="divider-eyebrow">{eyebrow ?? ''}</span>
83
+ <span class="sd-hairline sd-hairline--row sd-hairline-above-label" aria-hidden="true"></span>
84
+ <div class="title-row">
85
+ <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
86
+ <span class="title-inline">
87
+ <svg
88
+ bind:this={svgEl}
89
+ class="divider-label"
90
+ width={svgW || undefined}
91
+ height={svgH || undefined}
92
+ viewBox={svgW && svgH ? `${svgX} ${svgY} ${svgW} ${svgH}` : undefined}
93
+ aria-label={title}
94
+ role="img"
95
+ >
96
+ <defs>
97
+ <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
98
+ <feMorphology in="SourceAlpha" operator="dilate" radius={outlineRadius} result="dilated" />
99
+ <feFlood flood-color={outlineColor} result="color" />
100
+ <feComposite in="color" in2="dilated" operator="in" result="outline" />
101
+ <feComposite in="SourceGraphic" in2="outline" operator="over" />
102
+ </filter>
103
+ </defs>
104
+ <text
105
+ bind:this={svgTextEl}
106
+ x="0"
107
+ y="0"
108
+ dominant-baseline="hanging"
109
+ filter="url(#{filterId})"
110
+ >{title}</text>
111
+ </svg>
112
+ </span>
113
+ <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
114
+ </div>
115
+ <span class="sd-hairline sd-hairline--row sd-hairline-below-label" aria-hidden="true"></span>
116
+ <span class="sd-hairline sd-hairline--row sd-hairline-above-description" aria-hidden="true"></span>
117
+ <div class="description-row">
118
+ <span class="sd-hairline sd-hairline--side sd-hairline-through-description" aria-hidden="true"></span>
119
+ <span class="description-inline">
120
+ <p class="divider-description">{description ?? ''}</p>
121
+ </span>
122
+ <span class="sd-hairline sd-hairline--side sd-hairline-through-description" aria-hidden="true"></span>
123
+ </div>
124
+ <span class="sd-hairline sd-hairline--row sd-hairline-below-description" aria-hidden="true"></span>
107
125
  </div>
108
- <span class="sd-hairline sd-hairline--row sd-hairline-below-label" aria-hidden="true"></span>
109
- <span class="sd-hairline sd-hairline--row sd-hairline-above-description" aria-hidden="true"></span>
110
- <div class="description-row">
111
- <span class="sd-hairline sd-hairline--side sd-hairline-through-description" aria-hidden="true"></span>
112
- <span class="description-inline">
113
- <p class="divider-description">{description ?? ''}</p>
114
- </span>
115
- <span class="sd-hairline sd-hairline--side sd-hairline-through-description" aria-hidden="true"></span>
126
+ {:else}
127
+ <div class="section-divider variant-{variant}">
128
+ <!--PRUNE_FOR sectiondivider eyebrow-display != none default=none-->
129
+ <span class="divider-eyebrow">{eyebrow ?? ''}</span>
130
+ <!--END_PRUNE-->
131
+ <!--PRUNE_FOR sectiondivider hairline == above-label default=none-->
132
+ <span class="sd-hairline sd-hairline--row sd-hairline-above-label" aria-hidden="true"></span>
133
+ <!--END_PRUNE-->
134
+ <div class="title-row">
135
+ <!--PRUNE_FOR sectiondivider hairline == through-label default=none-->
136
+ <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
137
+ <!--END_PRUNE-->
138
+ <span class="title-inline">
139
+ <svg
140
+ bind:this={svgEl}
141
+ class="divider-label"
142
+ width={svgW || undefined}
143
+ height={svgH || undefined}
144
+ viewBox={svgW && svgH ? `${svgX} ${svgY} ${svgW} ${svgH}` : undefined}
145
+ aria-label={title}
146
+ role="img"
147
+ >
148
+ <defs>
149
+ <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
150
+ <feMorphology in="SourceAlpha" operator="dilate" radius={outlineRadius} result="dilated" />
151
+ <feFlood flood-color={outlineColor} result="color" />
152
+ <feComposite in="color" in2="dilated" operator="in" result="outline" />
153
+ <feComposite in="SourceGraphic" in2="outline" operator="over" />
154
+ </filter>
155
+ </defs>
156
+ <text
157
+ bind:this={svgTextEl}
158
+ x="0"
159
+ y="0"
160
+ dominant-baseline="hanging"
161
+ filter="url(#{filterId})"
162
+ >{title}</text>
163
+ </svg>
164
+ </span>
165
+ <!--PRUNE_FOR sectiondivider hairline == through-label default=none-->
166
+ <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
167
+ <!--END_PRUNE-->
168
+ </div>
169
+ <!--PRUNE_FOR sectiondivider hairline == below-label default=none-->
170
+ <span class="sd-hairline sd-hairline--row sd-hairline-below-label" aria-hidden="true"></span>
171
+ <!--END_PRUNE-->
172
+ <!--PRUNE_FOR sectiondivider hairline == above-description default=none-->
173
+ <span class="sd-hairline sd-hairline--row sd-hairline-above-description" aria-hidden="true"></span>
174
+ <!--END_PRUNE-->
175
+ <!--PRUNE_FOR sectiondivider description-display != none default=flex-->
176
+ <div class="description-row">
177
+ <!--PRUNE_FOR sectiondivider hairline == through-description default=none-->
178
+ <span class="sd-hairline sd-hairline--side sd-hairline-through-description" aria-hidden="true"></span>
179
+ <!--END_PRUNE-->
180
+ <span class="description-inline">
181
+ <p class="divider-description">{description ?? ''}</p>
182
+ </span>
183
+ <!--PRUNE_FOR sectiondivider hairline == through-description default=none-->
184
+ <span class="sd-hairline sd-hairline--side sd-hairline-through-description" aria-hidden="true"></span>
185
+ <!--END_PRUNE-->
186
+ </div>
187
+ <!--END_PRUNE-->
188
+ <!--PRUNE_FOR sectiondivider hairline == below-description default=none-->
189
+ <span class="sd-hairline sd-hairline--row sd-hairline-below-description" aria-hidden="true"></span>
190
+ <!--END_PRUNE-->
116
191
  </div>
117
- <span class="sd-hairline sd-hairline--row sd-hairline-below-description" aria-hidden="true"></span>
118
- </div>
192
+ {/if}
119
193
 
120
194
  <style>
121
195
  /* Each size variant owns its full token set: typography, geometry, colors