@happyvertical/smrt-products 0.55.16 → 0.55.19

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 (28) hide show
  1. package/dist/lib/chunks/{__smrt-register__-BwKt2549.js → __smrt-register__-CHWpaPZb.js} +2 -2
  2. package/dist/lib/chunks/{__smrt-register__-BwKt2549.js.map → __smrt-register__-CHWpaPZb.js.map} +1 -1
  3. package/dist/lib/chunks/{collections-D2oi_2PD.js → collections-OOJeR05d.js} +2 -2
  4. package/dist/lib/chunks/{collections-D2oi_2PD.js.map → collections-OOJeR05d.js.map} +1 -1
  5. package/dist/lib/chunks/{components-DoiQjCUj.js → components-B_eBqqq7.js} +3 -3
  6. package/dist/lib/chunks/components-B_eBqqq7.js.map +1 -0
  7. package/dist/lib/chunks/{generated-LG1FaP89.js → generated-DEBvTT0O.js} +2 -2
  8. package/dist/lib/chunks/{generated-LG1FaP89.js.map → generated-DEBvTT0O.js.map} +1 -1
  9. package/dist/lib/chunks/models-D2FZFimv.js +2 -0
  10. package/dist/lib/collections.js +1 -1
  11. package/dist/lib/components.js +1 -1
  12. package/dist/lib/generated.js +1 -1
  13. package/dist/lib/index.js +5 -5
  14. package/dist/lib/lib/components/LiveProductList.svelte +14 -11
  15. package/dist/lib/lib/components/ProductCard.svelte +20 -17
  16. package/dist/lib/lib/components/ProductForm.svelte +12 -9
  17. package/dist/lib/lib/components/TestComponent.svelte +6 -3
  18. package/dist/lib/lib/components/auto-generated/AutoForm.svelte +13 -10
  19. package/dist/lib/lib/components/auto-generated/FieldRenderer.svelte +6 -3
  20. package/dist/lib/lib/features/CategoryManager.svelte +10 -7
  21. package/dist/lib/lib/features/ProductCatalog.svelte +10 -7
  22. package/dist/lib/manifest.json +1 -1
  23. package/dist/lib/models.js +1 -1
  24. package/dist/lib/smrt-knowledge.json +3 -3
  25. package/dist/lib/smrt-products.css +30 -24
  26. package/package.json +14 -14
  27. package/dist/lib/chunks/components-DoiQjCUj.js.map +0 -1
  28. package/dist/lib/chunks/models-Buh7bo27.js +0 -2
@@ -11,7 +11,7 @@ var root_2$1 = $.from_html(`<p class="product-description svelte-11ja2cl"> </p>`
11
11
  var root_3 = $.from_html(`<div class="product-category svelte-11ja2cl"> </div>`);
12
12
  var root_4 = $.from_html(`<span class="tag svelte-11ja2cl"> </span>`);
13
13
  var root_5 = $.from_html(`<div class="product-tags svelte-11ja2cl"></div>`);
14
- var root_6 = $.from_html(`<div class="product-card svelte-11ja2cl"><div class="product-header svelte-11ja2cl"><h3 class="product-name svelte-11ja2cl"> </h3> <!></div> <!> <!> <div class="product-meta svelte-11ja2cl"><!> <!></div> <div class="product-actions svelte-11ja2cl"><!> <!></div></div>`);
14
+ var root_6 = $.from_html(`<div class="product-card svelte-11ja2cl" data-smrt-component="ProductCard"><div class="product-header svelte-11ja2cl"><h3 class="product-name svelte-11ja2cl"> </h3> <!></div> <!> <!> <div class="product-meta svelte-11ja2cl"><!> <!></div> <div class="product-actions svelte-11ja2cl"><!> <!></div></div>`);
15
15
  function ProductCard($$anchor, $$props) {
16
16
  $.push($$props, true);
17
17
  var div = root_6();
@@ -123,7 +123,7 @@ function ProductCard($$anchor, $$props) {
123
123
  //#region src/lib/components/ProductForm.svelte
124
124
  var root = $.from_html(`<span class="error-message svelte-1hh5ovx"> </span>`);
125
125
  var root_1 = $.from_html(`<div class="form-group svelte-1hh5ovx"><label for="name" class="svelte-1hh5ovx"> </label> <!> <!></div> <div class="form-group svelte-1hh5ovx"><label for="description" class="svelte-1hh5ovx">Description</label> <!></div> <div class="form-row svelte-1hh5ovx"><div class="form-group svelte-1hh5ovx"><label for="price" class="svelte-1hh5ovx">Price *</label> <!> <!></div> <div class="form-group svelte-1hh5ovx"><label for="category" class="svelte-1hh5ovx">Category</label> <!></div></div> <div class="form-group svelte-1hh5ovx"><label for="tags" class="svelte-1hh5ovx">Tags</label> <!> <small class="form-hint svelte-1hh5ovx"> </small></div> <div class="form-group svelte-1hh5ovx"><label class="checkbox-label svelte-1hh5ovx"><input type="checkbox" class="form-checkbox svelte-1hh5ovx"/> </label></div> <div class="form-actions svelte-1hh5ovx"><!> <!></div>`, 1);
126
- var root_2 = $.from_html(`<div class="product-form-shell svelte-1hh5ovx"><!></div>`);
126
+ var root_2 = $.from_html(`<div class="product-form-shell svelte-1hh5ovx" data-smrt-component="ProductForm"><!></div>`);
127
127
  function ProductForm($$anchor, $$props) {
128
128
  $.push($$props, true);
129
129
  const { t } = useI18n();
@@ -389,4 +389,4 @@ function ProductForm($$anchor, $$props) {
389
389
  //#endregion
390
390
  export { ProductCard as n, ProductForm as t };
391
391
 
392
- //# sourceMappingURL=components-DoiQjCUj.js.map
392
+ //# sourceMappingURL=components-B_eBqqq7.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"components-B_eBqqq7.js","names":[],"sources":["../../../src/lib/components/ProductCard.svelte","../../../src/lib/components/ProductForm.svelte"],"sourcesContent":["<script lang=\"ts\">\nimport { Button } from '@happyvertical/smrt-ui/ui';\nimport type { ProductData } from '../types';\n\ninterface Props {\n /** The product to display. */\n product: ProductData;\n /** Fired when the user clicks to edit the product. */\n onEdit?: (product: ProductData) => void;\n /** Fired when the user clicks to delete the product. */\n onDelete?: (id: string) => void;\n}\n\nconst { product, onEdit, onDelete }: Props = $props();\n</script>\n\n<div class=\"product-card\" data-smrt-component=\"ProductCard\">\n <div class=\"product-header\">\n <h3 class=\"product-name\">{product.name}</h3>\n {#if product.manufacturer}\n <div class=\"product-manufacturer\">{product.manufacturer}</div>\n {/if}\n </div>\n\n {#if product.model}\n <div class=\"product-model\">Model: {product.model}</div>\n {/if}\n\n {#if product.description}\n <p class=\"product-description\">{product.description}</p>\n {/if}\n\n <div class=\"product-meta\">\n {#if product.category}\n <div class=\"product-category\">Category: {product.category}</div>\n {/if}\n \n {#if product.tags && product.tags.length > 0}\n <div class=\"product-tags\">\n {#each product.tags as tag}\n <span class=\"tag\">{tag}</span>\n {/each}\n </div>\n {/if}\n </div>\n \n <div class=\"product-actions\">\n {#if onEdit}\n <Button type=\"button\" variant=\"secondary\" size=\"sm\" onclick={() => onEdit?.(product)}>\n Edit\n </Button>\n {/if}\n\n {#if onDelete}\n <Button type=\"button\" variant=\"danger\" size=\"sm\" onclick={() => onDelete?.(product.id)}>\n Delete\n </Button>\n {/if}\n </div>\n</div>\n\n<style>\n@layer smrt.reset, smrt.structure, smrt.theme;\n@layer smrt.theme {\n .product-card {\n border: 1px solid var(--smrt-color-outline-variant);\n border-radius: var(--smrt-radius-md);\n padding: 1rem;\n background: var(--smrt-color-surface);\n box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow) 10%, transparent));\n transition: box-shadow 0.2s;\n }\n\n .product-card:hover {\n box-shadow: var(--smrt-elevation-2, 0 4px 6px color-mix(in srgb, var(--smrt-color-shadow) 10%, transparent));\n }\n \n .product-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 0.5rem;\n }\n \n .product-name {\n margin: 0;\n font-size: var(--smrt-typography-title-medium-size, 1.125rem);\n font-weight: var(--smrt-typography-weight-semibold, 600);\n color: var(--smrt-color-on-surface);\n }\n\n .product-manufacturer {\n font-size: var(--smrt-typography-title-small-size, 0.875rem);\n font-weight: var(--smrt-typography-weight-medium, 500);\n color: var(--smrt-color-on-surface-variant);\n }\n\n .product-model {\n font-size: var(--smrt-typography-body-medium-size, 0.875rem);\n color: var(--smrt-color-on-surface-variant);\n margin-bottom: 0.5rem;\n }\n\n .product-category {\n font-size: var(--smrt-typography-label-medium-size, 0.75rem);\n font-weight: var(--smrt-typography-weight-medium, 500);\n color: var(--smrt-color-on-surface);\n background: var(--smrt-color-surface-container);\n padding: 0.25rem 0.5rem;\n border-radius: var(--smrt-radius-sm);\n display: inline-block;\n margin-bottom: 0.5rem;\n }\n \n .product-description {\n margin: 0.5rem 0;\n color: var(--smrt-color-on-surface-variant);\n font-size: var(--smrt-typography-body-medium-size, 0.875rem);\n line-height: var(--smrt-typography-body-medium-line-height, 1.4);\n }\n \n .product-meta {\n margin: 0.75rem 0;\n }\n \n \n .product-tags {\n margin-top: 0.5rem;\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n }\n \n .tag {\n background: var(--smrt-color-surface-container);\n color: var(--smrt-color-on-surface);\n padding: 0.125rem 0.5rem;\n border-radius: var(--smrt-radius-full);\n font-size: var(--smrt-typography-label-medium-size, 0.75rem);\n }\n\n .product-actions {\n display: flex;\n gap: 0.5rem;\n margin-top: 1rem;\n padding-top: 0.75rem;\n border-top: 1px solid var(--smrt-color-outline-variant);\n }\n}\n</style>","<script lang=\"ts\">\nimport { Form, Input, Textarea } from '@happyvertical/smrt-ui/forms';\nimport { useI18n } from '@happyvertical/smrt-ui/i18n';\nimport { Button } from '@happyvertical/smrt-ui/ui';\nimport { M } from '../i18n.js';\nimport type { ProductData } from '../types';\n\nconst { t } = useI18n();\n\ninterface Props {\n /** Product to populate the form with. */\n product?: Partial<ProductData>;\n /** Fired when the user submits the form. */\n onSubmit: (product: Partial<ProductData>) => void;\n /** Fired when the user clicks the cancel button. */\n onCancel?: () => void;\n /** Disables all inputs and shows \"Saving...\" when true. */\n loading?: boolean;\n}\n\nconst { product = {}, onSubmit, onCancel, loading = false }: Props = $props();\n\nconst formData = $state({\n name: product.name || '',\n description: product.description || '',\n price: product.price || 0,\n inStock: product.inStock ?? true,\n category: product.category || '',\n tags: product.tags?.join(', ') || '',\n});\n\nlet errors = $state<Record<string, string>>({});\n\nfunction validateForm() {\n errors = {};\n\n if (!formData.name.trim()) {\n errors.name = 'Product name is required';\n }\n\n if (formData.price < 0) {\n errors.price = 'Price must be non-negative';\n }\n\n return Object.keys(errors).length === 0;\n}\n\nfunction handleSubmit(event: Event) {\n event.preventDefault();\n\n if (!validateForm()) {\n return;\n }\n\n const productData: Partial<ProductData> = {\n ...product,\n name: formData.name.trim(),\n description: formData.description.trim() || undefined,\n price: formData.price,\n inStock: formData.inStock,\n category: formData.category.trim(),\n tags: formData.tags\n ? formData.tags\n .split(',')\n .map((tag) => tag.trim())\n .filter(Boolean)\n : [],\n };\n\n onSubmit(productData);\n}\n</script>\n\n<div class=\"product-form-shell\" data-smrt-component=\"ProductForm\">\n <Form onsubmit={handleSubmit} class=\"product-form\">\n <div class=\"form-group\">\n <label for=\"name\">{t(M['products.product_form.name_label'])}</label>\n <Input\n id=\"name\"\n type=\"text\"\n bind:value={formData.name}\n disabled={loading}\n class={errors.name ? 'error' : ''}\n placeholder={t(M['products.product_form.name_placeholder'])}\n />\n {#if errors.name}\n <span class=\"error-message\">{errors.name}</span>\n {/if}\n </div>\n\n <div class=\"form-group\">\n <label for=\"description\">Description</label>\n <Textarea\n id=\"description\"\n bind:value={formData.description}\n disabled={loading}\n placeholder={t(M['products.product_form.description_placeholder'])}\n rows={3}\n ></Textarea>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"price\">Price *</label>\n <Input\n id=\"price\"\n type=\"number\"\n step=\"0.01\"\n min=\"0\"\n bind:value={formData.price}\n disabled={loading}\n class={errors.price ? 'error' : ''}\n placeholder=\"0.00\"\n />\n {#if errors.price}\n <span class=\"error-message\">{errors.price}</span>\n {/if}\n </div>\n\n <div class=\"form-group\">\n <label for=\"category\">Category</label>\n <Input\n id=\"category\"\n type=\"text\"\n bind:value={formData.category}\n disabled={loading}\n placeholder={t(M['products.product_form.category_placeholder'])}\n />\n </div>\n </div>\n\n <div class=\"form-group\">\n <label for=\"tags\">Tags</label>\n <Input\n id=\"tags\"\n type=\"text\"\n bind:value={formData.tags}\n disabled={loading}\n placeholder={t(M['products.product_form.tags_placeholder'])}\n />\n <small class=\"form-hint\">{t(M['products.product_form.tags_hint'])}</small>\n </div>\n\n <div class=\"form-group\">\n <label class=\"checkbox-label\">\n <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->\n <input\n type=\"checkbox\"\n bind:checked={formData.inStock}\n disabled={loading}\n class=\"form-checkbox\"\n />\n {t(M['products.product_form.in_stock_label'])}\n </label>\n </div>\n\n <div class=\"form-actions\">\n {#if onCancel}\n <Button type=\"button\" variant=\"secondary\" onclick={onCancel} disabled={loading}>\n Cancel\n </Button>\n {/if}\n\n <Button type=\"submit\" variant=\"primary\" disabled={loading}>\n {#if loading}\n Saving...\n {:else}\n {product.id ? 'Update Product' : 'Create Product'}\n {/if}\n </Button>\n </div>\n </Form>\n</div>\n\n<style>\n@layer smrt.reset, smrt.structure, smrt.theme;\n@layer smrt.theme {\n .product-form-shell :global(.product-form) {\n max-width: 500px;\n padding: 1.5rem;\n background: var(--smrt-color-surface);\n border-radius: var(--smrt-radius-md);\n border: 1px solid var(--smrt-color-outline-variant);\n }\n\n .form-group {\n margin-bottom: 1rem;\n }\n\n .form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n }\n\n label {\n display: block;\n margin-bottom: 0.25rem;\n font-weight: var(--smrt-typography-weight-medium, 500);\n color: var(--smrt-color-on-surface);\n font-size: var(--smrt-typography-label-large-size, 0.875rem);\n }\n\n /* Error border on the migrated <Input>. The primitive renders the inner\n <input class=\"input error\"> inside its own component, so the scoped class\n can't reach it without :global (#1589). */\n .product-form-shell :global(.input.error) {\n border-color: var(--smrt-color-error);\n }\n\n .checkbox-label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n }\n \n .form-checkbox {\n width: auto;\n }\n \n .form-hint {\n color: var(--smrt-color-on-surface-variant);\n font-size: var(--smrt-typography-body-small-size, 0.75rem);\n margin-top: 0.25rem;\n }\n\n .error-message {\n color: var(--smrt-color-error);\n font-size: var(--smrt-typography-label-medium-size, 0.75rem);\n margin-top: 0.25rem;\n display: block;\n }\n\n .form-actions {\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n margin-top: 1.5rem;\n padding-top: 1rem;\n border-top: 1px solid var(--smrt-color-outline-variant);\n }\n}\n</style>"],"mappings":";;;;;;;;;;;;;;wCAAA;;KAgBC,MAAG,OAAA;KACD,QAAG,EAAA,MADL,GAAG;KAEC,KAAE,EAAA,MADJ,KAAG;yBACD,IAAE,IAAA;sBAAF,IAAE,CAAA;;MAEA,QAAG,OAAA;4BAAH,OAAG,IAAA;6DAAuC,YAAY,CAAA;qBAAtD,KAAG;;;sBADO,cAAY,SAAA,UAAA;;SAF1B,KAAG;wBAAH,OAAG,CAAA;;MAQD,QAAG,SAAA;4BAAH,KAAG;uEAAuC,SAAK,IAAA,CAAA;qBAA/C,KAAG;;;sBADO,OAAK,SAAA,YAAA;;;;MAKf,IAAC,SAAA;4BAAD,GAAC,IAAA;6DAAsC,WAAW,CAAA;qBAAlD,CAAC;;;sBADS,aAAW,SAAA,YAAA;;KAIvB,QAAG,EAAA,QAAA,QAAA,CAAA;sBAAH,KAAG;;MAEC,QAAG,OAAA;4BAAH,KAAG;0EAA6C,YAAQ,IAAA,CAAA;qBAAxD,KAAG;;;sBADO,UAAQ,SAAA,YAAA;;;;MAKlB,QAAG,OAAA;SAAH,OAAG,UAAA,QAAA,QACa,MAAI,EAAA,QAAA,UAAI,QAAG;OACvB,OAAI,OAAA;6BAAJ,MAAI,IAAA;oDAAc,GAAG,CAAA,CAAA;sBAArB,IAAI;;UAFR,KAAG;qBAAH,KAAG;;;sBADO,QAAI,QAAA,QAAY,KAAK,SAAS,GAAC,SAAA,YAAA;;SAL7C,KAAG;KAcH,QAAG,EAAA,QAdH,OAAG,CAAA;sBAcH,KAAG;;EAEC,OAAM,UAAA;;;;;;;;;;;;;;;;;;EAMN,OAAM,UAAA;;;;qDAA4E,EAAE;;;;;;;;;;;;SARxF,KAAG;SA9BL,GAAG;0DAEkC,IAAI,CAAA;oBAFzC,GAAG;;AAFI;;;;;;wCCdR;;CAOA,MAAM,EAAE,MAAM,QAAO;;;;;CAarB,MAAM,UAAS,EAAA,KAAA,SAAA,WAAA,WAAA,CAAA,EAAA,GAA2B,UAAO,EAAA,KAAA,SAAA,WAAA,GAAG,KAAK;CAEzD,MAAM,WAAQ,EAAA,MAAA;EACZ,MAAM,QAAO,CAAA,CAAC,QAAQ;EACtB,aAAa,QAAO,CAAA,CAAC,eAAe;EACpC,OAAO,QAAO,CAAA,CAAC,SAAS;EACxB,SAAS,QAAO,CAAA,CAAC,WAAW;EAC5B,UAAU,QAAO,CAAA,CAAC,YAAY;EAC9B,MAAM,QAAO,CAAA,CAAC,MAAM,KAAK,IAAI,KAAK;;CAGpC,IAAI,SAAS,EAAA,MAAM,EAAA,MAAA,CAAA,CAAA,CAAA;CAEnB,SAAS,eAAe;QACtB,QAAM,CAAA,GAAA,IAAA;EAEN,IAAE,CAAG,SAAS,KAAK,KAAI,GAAA,EAAA,IACrB,MAAM,CAAA,CAAC,OAAO;EAGhB,IAAI,SAAS,QAAQ,GAAA,EAAA,IACnB,MAAM,CAAA,CAAC,QAAQ;EAGjB,OAAO,OAAO,KAAI,EAAA,IAAC,MAAM,CAAA,CAAA,CAAE,WAAW;CACxC;CAEA,SAAS,aAAa,OAAc;EAClC,MAAM,eAAc;EAEpB,IAAE,CAAG,aAAY,GACf;EAGF,MAAM,cAAiC;MAClC,QAAO;GACV,MAAM,SAAS,KAAK,KAAI;GACxB,aAAa,SAAS,YAAY,KAAI,KAAM,KAAA;GAC5C,OAAO,SAAS;GAChB,SAAS,SAAS;GAClB,UAAU,SAAS,SAAS,KAAI;GAChC,MAAM,SAAS,OACX,SAAS,KACN,MAAM,GAAG,CAAA,CACT,KAAK,QAAQ,IAAI,KAAI,CAAA,CAAA,CACrB,OAAO,OAAO,IAAA,CAAA;;mBAId,WAAW;CACtB;KAGC,MAAG,OAAA;CACD,KAAA,EAAA,MADF,GACM,GAAA;YAAW;;;;OACb,QAAG,EAAA,YAAA,QAAA;OACD,QAAK,EAAA,MADP,KAAG;2BACD,OAAK,IAAA;0BAAL,OAAK,CAAA;;mCAMG,MAAM,CAAA,CAAC,OAAO,UAAU,EAAE;6BACpB,EAAE,EAAE,yCAAwC,CAAA;IAN1D,MAAA,QAAA;;;;aAIW,QAAO;;;;;;;;SADjB,QAAU;aAAE,SAAS;;SAArB,MAAU,SAAA;MAAE,SAAS,OAAI;;;;;;QAMxB,OAAI,KAAA;8BAAJ,MAAI,IAAA;qDAAwB,MAAM,CAAA,CAAC,IAAI,CAAA;uBAAvC,IAAI;;;cADF,MAAM,CAAA,CAAC,MAAI,SAAA,UAAA;;WAVjB,KAAG;OAeH,QAAG,EAAA,QAfH,OAAG,CAAA;kCAeH,KAAG,GAAA,CAAA;;6BAMa,EAAE,EAAE,gDAA+C,CAAA;IAJjE,SAAA,QAAA;;;aAGW,QAAO;;;;;WAEX;SAHN,QAAU;aAAE,SAAS;;SAArB,MAAU,SAAA;MAAE,SAAS,cAAW;;;;WAJnC,KAAG;OAWH,QAAG,EAAA,QAXH,OAAG,CAAA;OAYD,QAAG,EAAA,MADL,KAAG;kCACD,KAAG,GAAA,CAAA;;mCASO,MAAM,CAAA,CAAC,QAAQ,UAAU,EAAE;IAPnC,MAAA,QAAA;;;;;;aAMW,QAAO;;;;;;SADjB,QAAU;aAAE,SAAS;;SAArB,MAAU,SAAA;MAAE,SAAS,QAAK;;;;;;QAMzB,SAAI,KAAA;8BAAJ,QAAI,IAAA;qDAAwB,MAAM,CAAA,CAAC,KAAK,CAAA;uBAAxC,MAAI;;;cADF,MAAM,CAAA,CAAC,OAAK,SAAA,YAAA;;WAZlB,KAAG;OAiBH,QAAG,EAAA,QAjBH,OAAG,CAAA;kCAiBH,KAAG,GAAA,CAAA;;6BAOa,EAAE,EAAE,6CAA4C,CAAA;IAL9D,MAAA,QAAA;;;;aAIW,QAAO;;;;;SADjB,QAAU;aAAE,SAAS;;SAArB,MAAU,SAAA;MAAE,SAAS,WAAQ;;;;WALhC,KAAG;WAlBL,KAAG;OA8BH,QAAG,EAAA,QA9BH,OAAG,CAAA;kCA8BH,KAAG,GAAA,CAAA;;6BAOa,EAAE,EAAE,yCAAwC,CAAA;IAL1D,MAAA,QAAA;;;;aAIW,QAAO;;;;;SADjB,QAAU;aAAE,SAAS;;SAArB,MAAU,SAAA;MAAE,SAAS,OAAI;;;;OAI1B,QAAK,EAAA,QAAA,QAAA,CAAA;6BAAL,OAAK,IAAA;WATP,KAAG;OAYH,QAAG,EAAA,QAZH,OAAG,CAAA;OAaD,UAAK,EAAA,MADP,KAAG;OAGC,QAAA,EAAA,MAFF,OAAK;2BAEH,KAAA;0BAAA,KAAA;WAFF,OAAK;WADP,KAAG;OAaH,QAAG,EAAA,QAbH,OAAG,CAAA;wBAaH,KAAG;;IAEC,OAAM,UAAA;;;;;;;aAAgE,QAAO;;;;;;;;;;;;;GAK/E,OAAA,EAAA,QAAA,QAAA,CAAM,GAAA;;;;YAA2C,QAAO;;;;;;;;;;;iDAIpD,QAAO,CAAA,CAAC,KAAK,mBAAmB,gBAAgB,CAAA;;;;UAH9C,QAAO,GAAA,SAAA,YAAA;WAAA,SAAA,WAAA,EAAA;;;;;;WARf,KAAG;;;;IAVC,MAAA,WAGW,QAAO;;;UAzEF,EAAE,EAAE,mCAAkC;UAgE/B,EAAE,EAAE,kCAAiC;UAY5D,EAAE,EAAE,uCAAsC;;kBAN1C,aAEe,SAAS,UAAO,YAAhB,SAAS,UAAO,OAAA;;;;;SA3EvC,GAAG;oBAAH,GAAG;;AAFI"}
@@ -1,7 +1,7 @@
1
- import "./__smrt-register__-BwKt2549.js";
1
+ import "./__smrt-register__-CHWpaPZb.js";
2
2
  //#region src/lib/generated/index.ts
3
3
  var autoGeneratedComponents = {};
4
4
  //#endregion
5
5
  export { autoGeneratedComponents as t };
6
6
 
7
- //# sourceMappingURL=generated-LG1FaP89.js.map
7
+ //# sourceMappingURL=generated-DEBvTT0O.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"generated-LG1FaP89.js","names":[],"sources":["../../../src/lib/generated/index.ts"],"sourcesContent":["/**\n * Auto-generated SMRT Components\n *\n * This file is automatically generated by the SMRT Vite plugin.\n * It exports UI components that are auto-generated from @smrt() decorated classes.\n *\n * DO NOT EDIT THIS FILE MANUALLY - it will be overwritten.\n */\n\n// Self-register this package's manifest for consumers that import via this\n// subpath without the main entry. See src/__smrt-register__.ts (issue #1132).\nimport '../../__smrt-register__.js';\n\n// Auto-generated components will be exported here by the SMRT Vite plugin\n// Examples:\n// export { default as SmrtProductForm } from './SmrtProductForm.svelte';\n// export { default as SmrtProductTable } from './SmrtProductTable.svelte';\n// export { default as SmrtCategoryForm } from './SmrtCategoryForm.svelte';\n\n// For now, export an empty object to prevent import errors\nexport const autoGeneratedComponents = {};\n"],"mappings":";;AAoBA,IAAa,0BAA0B,CAAC"}
1
+ {"version":3,"file":"generated-DEBvTT0O.js","names":[],"sources":["../../../src/lib/generated/index.ts"],"sourcesContent":["/**\n * Auto-generated SMRT Components\n *\n * This file is automatically generated by the SMRT Vite plugin.\n * It exports UI components that are auto-generated from @smrt() decorated classes.\n *\n * DO NOT EDIT THIS FILE MANUALLY - it will be overwritten.\n */\n\n// Self-register this package's manifest for consumers that import via this\n// subpath without the main entry. See src/__smrt-register__.ts (issue #1132).\nimport '../../__smrt-register__.js';\n\n// Auto-generated components will be exported here by the SMRT Vite plugin\n// Examples:\n// export { default as SmrtProductForm } from './SmrtProductForm.svelte';\n// export { default as SmrtProductTable } from './SmrtProductTable.svelte';\n// export { default as SmrtCategoryForm } from './SmrtCategoryForm.svelte';\n\n// For now, export an empty object to prevent import errors\nexport const autoGeneratedComponents = {};\n"],"mappings":";;AAoBA,IAAa,0BAA0B,CAAC"}
@@ -0,0 +1,2 @@
1
+ import "./__smrt-register__-CHWpaPZb.js";
2
+ import "./Sku-CdhhTtjd.js";
@@ -1,4 +1,4 @@
1
- import { i as CategoryCollection, n as ProductVariantCollection, r as MaterialCollection, t as SkuCollection } from "./chunks/collections-D2oi_2PD.js";
1
+ import { i as CategoryCollection, n as ProductVariantCollection, r as MaterialCollection, t as SkuCollection } from "./chunks/collections-OOJeR05d.js";
2
2
  import { t as ProductCollection } from "./chunks/ProductCollection-BJXVIE6A.js";
3
3
  import { t as ProductAssetCollection } from "./chunks/ProductAssetCollection-pTm67_Vn.js";
4
4
  export { CategoryCollection, MaterialCollection, ProductAssetCollection, ProductCollection, ProductVariantCollection, SkuCollection };
@@ -1,2 +1,2 @@
1
- import { n as ProductCard, t as ProductForm } from "./chunks/components-DoiQjCUj.js";
1
+ import { n as ProductCard, t as ProductForm } from "./chunks/components-B_eBqqq7.js";
2
2
  export { ProductCard, ProductForm };
@@ -1,2 +1,2 @@
1
- import { t as autoGeneratedComponents } from "./chunks/generated-LG1FaP89.js";
1
+ import { t as autoGeneratedComponents } from "./chunks/generated-DEBvTT0O.js";
2
2
  export { autoGeneratedComponents };
package/dist/lib/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { t as __exportAll } from "./chunks/rolldown-runtime-D7D4PA-g.js";
2
- import "./chunks/__smrt-register__-BwKt2549.js";
2
+ import "./chunks/__smrt-register__-CHWpaPZb.js";
3
3
  import { a as Product, i as Material, n as ProductVariant, o as ProductType, r as ProductAsset, s as Category, t as Sku } from "./chunks/Sku-CdhhTtjd.js";
4
- import { i as CategoryCollection, n as ProductVariantCollection, r as MaterialCollection, t as SkuCollection } from "./chunks/collections-D2oi_2PD.js";
4
+ import { i as CategoryCollection, n as ProductVariantCollection, r as MaterialCollection, t as SkuCollection } from "./chunks/collections-OOJeR05d.js";
5
5
  import { t as ProductCollection } from "./chunks/ProductCollection-BJXVIE6A.js";
6
6
  import { t as ProductAssetCollection } from "./chunks/ProductAssetCollection-pTm67_Vn.js";
7
- import { n as ProductCard, t as ProductForm } from "./chunks/components-DoiQjCUj.js";
8
- import { t as autoGeneratedComponents } from "./chunks/generated-LG1FaP89.js";
9
- import "./chunks/models-Buh7bo27.js";
7
+ import { n as ProductCard, t as ProductForm } from "./chunks/components-B_eBqqq7.js";
8
+ import { t as autoGeneratedComponents } from "./chunks/generated-DEBvTT0O.js";
9
+ import "./chunks/models-D2FZFimv.js";
10
10
  import { n as productStore, t as ProductStoreClass } from "./chunks/stores-CB0SI1c5.js";
11
11
  import { i as slugify, n as formatPrice, r as generateId, t as formatDate } from "./chunks/utils-BgTqlQoH.js";
12
12
  import { SmrtRecipe, startRestServer } from "@happyvertical/smrt-core";
@@ -159,13 +159,15 @@ async function addProduct() {
159
159
  </section>
160
160
 
161
161
  <style>
162
+ @layer smrt.reset, smrt.structure, smrt.theme;
163
+ @layer smrt.theme {
162
164
  .live-products {
163
165
  max-width: 640px;
164
166
  margin: 0 auto;
165
167
  padding: 1.5rem;
166
- background: var(--smrt-color-surface, #fff);
167
- border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
168
- border-radius: var(--smrt-radius-md, 8px);
168
+ background: var(--smrt-color-surface);
169
+ border: 1px solid var(--smrt-color-outline-variant);
170
+ border-radius: var(--smrt-radius-md);
169
171
  }
170
172
 
171
173
  .live-products__header {
@@ -176,13 +178,13 @@ async function addProduct() {
176
178
  margin: 0 0 0.25rem 0;
177
179
  font-size: var(--smrt-typography-title-large-size, 1.25rem);
178
180
  font-weight: var(--smrt-typography-weight-semibold, 600);
179
- color: var(--smrt-color-on-surface, #1f2937);
181
+ color: var(--smrt-color-on-surface);
180
182
  }
181
183
 
182
184
  .live-products__hint {
183
185
  margin: 0;
184
186
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
185
- color: var(--smrt-color-on-surface-variant, #6b7280);
187
+ color: var(--smrt-color-on-surface-variant);
186
188
  }
187
189
 
188
190
  /* smrt-ui <Form> renders its own inner <form> with the forwarded class, so
@@ -200,7 +202,7 @@ async function addProduct() {
200
202
 
201
203
  .live-products__error {
202
204
  margin: 0 0 1rem 0;
203
- color: var(--smrt-color-error, #dc2626);
205
+ color: var(--smrt-color-error);
204
206
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
205
207
  }
206
208
 
@@ -208,7 +210,7 @@ async function addProduct() {
208
210
  margin: 0;
209
211
  padding: 1rem 0;
210
212
  text-align: center;
211
- color: var(--smrt-color-on-surface-variant, #6b7280);
213
+ color: var(--smrt-color-on-surface-variant);
212
214
  }
213
215
 
214
216
  .live-products__list {
@@ -225,17 +227,18 @@ async function addProduct() {
225
227
  align-items: center;
226
228
  justify-content: space-between;
227
229
  padding: 0.75rem 1rem;
228
- background: var(--smrt-color-surface-container-low, #f9fafb);
229
- border-radius: var(--smrt-radius-sm, 4px);
230
+ background: var(--smrt-color-surface-container-low);
231
+ border-radius: var(--smrt-radius-sm);
230
232
  }
231
233
 
232
234
  .live-products__item-name {
233
235
  font-weight: var(--smrt-typography-weight-medium, 500);
234
- color: var(--smrt-color-on-surface, #1f2937);
236
+ color: var(--smrt-color-on-surface);
235
237
  }
236
238
 
237
239
  .live-products__item-price {
238
- color: var(--smrt-color-on-surface-variant, #6b7280);
240
+ color: var(--smrt-color-on-surface-variant);
239
241
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
240
242
  }
243
+ }
241
244
  </style>
@@ -14,7 +14,7 @@ interface Props {
14
14
  const { product, onEdit, onDelete }: Props = $props();
15
15
  </script>
16
16
 
17
- <div class="product-card">
17
+ <div class="product-card" data-smrt-component="ProductCard">
18
18
  <div class="product-header">
19
19
  <h3 class="product-name">{product.name}</h3>
20
20
  {#if product.manufacturer}
@@ -60,17 +60,19 @@ const { product, onEdit, onDelete }: Props = $props();
60
60
  </div>
61
61
 
62
62
  <style>
63
+ @layer smrt.reset, smrt.structure, smrt.theme;
64
+ @layer smrt.theme {
63
65
  .product-card {
64
- border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
65
- border-radius: var(--smrt-radius-md, 8px);
66
+ border: 1px solid var(--smrt-color-outline-variant);
67
+ border-radius: var(--smrt-radius-md);
66
68
  padding: 1rem;
67
- background: var(--smrt-color-surface, #fff);
68
- box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow, #000) 10%, transparent));
69
+ background: var(--smrt-color-surface);
70
+ box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow) 10%, transparent));
69
71
  transition: box-shadow 0.2s;
70
72
  }
71
73
 
72
74
  .product-card:hover {
73
- box-shadow: var(--smrt-elevation-2, 0 4px 6px color-mix(in srgb, var(--smrt-color-shadow, #000) 10%, transparent));
75
+ box-shadow: var(--smrt-elevation-2, 0 4px 6px color-mix(in srgb, var(--smrt-color-shadow) 10%, transparent));
74
76
  }
75
77
 
76
78
  .product-header {
@@ -84,35 +86,35 @@ const { product, onEdit, onDelete }: Props = $props();
84
86
  margin: 0;
85
87
  font-size: var(--smrt-typography-title-medium-size, 1.125rem);
86
88
  font-weight: var(--smrt-typography-weight-semibold, 600);
87
- color: var(--smrt-color-on-surface, #1f2937);
89
+ color: var(--smrt-color-on-surface);
88
90
  }
89
91
 
90
92
  .product-manufacturer {
91
93
  font-size: var(--smrt-typography-title-small-size, 0.875rem);
92
94
  font-weight: var(--smrt-typography-weight-medium, 500);
93
- color: var(--smrt-color-on-surface-variant, #6b7280);
95
+ color: var(--smrt-color-on-surface-variant);
94
96
  }
95
97
 
96
98
  .product-model {
97
99
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
98
- color: var(--smrt-color-on-surface-variant, #6b7280);
100
+ color: var(--smrt-color-on-surface-variant);
99
101
  margin-bottom: 0.5rem;
100
102
  }
101
103
 
102
104
  .product-category {
103
105
  font-size: var(--smrt-typography-label-medium-size, 0.75rem);
104
106
  font-weight: var(--smrt-typography-weight-medium, 500);
105
- color: var(--smrt-color-on-surface, #374151);
106
- background: var(--smrt-color-surface-container, #f3f4f6);
107
+ color: var(--smrt-color-on-surface);
108
+ background: var(--smrt-color-surface-container);
107
109
  padding: 0.25rem 0.5rem;
108
- border-radius: var(--smrt-radius-sm, 4px);
110
+ border-radius: var(--smrt-radius-sm);
109
111
  display: inline-block;
110
112
  margin-bottom: 0.5rem;
111
113
  }
112
114
 
113
115
  .product-description {
114
116
  margin: 0.5rem 0;
115
- color: var(--smrt-color-on-surface-variant, #6b7280);
117
+ color: var(--smrt-color-on-surface-variant);
116
118
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
117
119
  line-height: var(--smrt-typography-body-medium-line-height, 1.4);
118
120
  }
@@ -130,10 +132,10 @@ const { product, onEdit, onDelete }: Props = $props();
130
132
  }
131
133
 
132
134
  .tag {
133
- background: var(--smrt-color-surface-container, #f3f4f6);
134
- color: var(--smrt-color-on-surface, #374151);
135
+ background: var(--smrt-color-surface-container);
136
+ color: var(--smrt-color-on-surface);
135
137
  padding: 0.125rem 0.5rem;
136
- border-radius: var(--smrt-radius-full, 9999px);
138
+ border-radius: var(--smrt-radius-full);
137
139
  font-size: var(--smrt-typography-label-medium-size, 0.75rem);
138
140
  }
139
141
 
@@ -142,6 +144,7 @@ const { product, onEdit, onDelete }: Props = $props();
142
144
  gap: 0.5rem;
143
145
  margin-top: 1rem;
144
146
  padding-top: 0.75rem;
145
- border-top: 1px solid var(--smrt-color-outline-variant, #f3f4f6);
147
+ border-top: 1px solid var(--smrt-color-outline-variant);
146
148
  }
149
+ }
147
150
  </style>
@@ -71,7 +71,7 @@ function handleSubmit(event: Event) {
71
71
  }
72
72
  </script>
73
73
 
74
- <div class="product-form-shell">
74
+ <div class="product-form-shell" data-smrt-component="ProductForm">
75
75
  <Form onsubmit={handleSubmit} class="product-form">
76
76
  <div class="form-group">
77
77
  <label for="name">{t(M['products.product_form.name_label'])}</label>
@@ -173,12 +173,14 @@ function handleSubmit(event: Event) {
173
173
  </div>
174
174
 
175
175
  <style>
176
+ @layer smrt.reset, smrt.structure, smrt.theme;
177
+ @layer smrt.theme {
176
178
  .product-form-shell :global(.product-form) {
177
179
  max-width: 500px;
178
180
  padding: 1.5rem;
179
- background: var(--smrt-color-surface, #fff);
180
- border-radius: var(--smrt-radius-md, 8px);
181
- border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
181
+ background: var(--smrt-color-surface);
182
+ border-radius: var(--smrt-radius-md);
183
+ border: 1px solid var(--smrt-color-outline-variant);
182
184
  }
183
185
 
184
186
  .form-group {
@@ -195,7 +197,7 @@ function handleSubmit(event: Event) {
195
197
  display: block;
196
198
  margin-bottom: 0.25rem;
197
199
  font-weight: var(--smrt-typography-weight-medium, 500);
198
- color: var(--smrt-color-on-surface, #374151);
200
+ color: var(--smrt-color-on-surface);
199
201
  font-size: var(--smrt-typography-label-large-size, 0.875rem);
200
202
  }
201
203
 
@@ -203,7 +205,7 @@ function handleSubmit(event: Event) {
203
205
  <input class="input error"> inside its own component, so the scoped class
204
206
  can't reach it without :global (#1589). */
205
207
  .product-form-shell :global(.input.error) {
206
- border-color: var(--smrt-color-error, #dc2626);
208
+ border-color: var(--smrt-color-error);
207
209
  }
208
210
 
209
211
  .checkbox-label {
@@ -218,13 +220,13 @@ function handleSubmit(event: Event) {
218
220
  }
219
221
 
220
222
  .form-hint {
221
- color: var(--smrt-color-on-surface-variant, #6b7280);
223
+ color: var(--smrt-color-on-surface-variant);
222
224
  font-size: var(--smrt-typography-body-small-size, 0.75rem);
223
225
  margin-top: 0.25rem;
224
226
  }
225
227
 
226
228
  .error-message {
227
- color: var(--smrt-color-error, #dc2626);
229
+ color: var(--smrt-color-error);
228
230
  font-size: var(--smrt-typography-label-medium-size, 0.75rem);
229
231
  margin-top: 0.25rem;
230
232
  display: block;
@@ -236,6 +238,7 @@ function handleSubmit(event: Event) {
236
238
  justify-content: flex-end;
237
239
  margin-top: 1.5rem;
238
240
  padding-top: 1rem;
239
- border-top: 1px solid var(--smrt-color-outline-variant, #f3f4f6);
241
+ border-top: 1px solid var(--smrt-color-outline-variant);
240
242
  }
243
+ }
241
244
  </style>
@@ -16,10 +16,13 @@ const { t } = useI18n();
16
16
  </div>
17
17
 
18
18
  <style>
19
+ @layer smrt.reset, smrt.structure, smrt.theme;
20
+ @layer smrt.theme {
19
21
  .test-component {
20
22
  padding: 1rem;
21
- border: 1px solid var(--smrt-color-outline-variant, #ccc);
22
- border-radius: var(--smrt-radius-sm, 4px);
23
- background: var(--smrt-color-surface-container-low, #f9f9f9);
23
+ border: 1px solid var(--smrt-color-outline-variant);
24
+ border-radius: var(--smrt-radius-sm);
25
+ background: var(--smrt-color-surface-container-low);
24
26
  }
27
+ }
25
28
  </style>
@@ -152,13 +152,15 @@ function _getFieldType(
152
152
  </div>
153
153
 
154
154
  <style>
155
+ @layer smrt.reset, smrt.structure, smrt.theme;
156
+ @layer smrt.theme {
155
157
  .auto-form {
156
158
  max-width: 600px;
157
159
  margin: 0 auto;
158
160
  padding: 1.5rem;
159
- background: var(--smrt-color-surface, #fff);
160
- border-radius: var(--smrt-radius-md, 8px);
161
- box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow, #000) 10%, transparent));
161
+ background: var(--smrt-color-surface);
162
+ border-radius: var(--smrt-radius-md);
163
+ box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow) 10%, transparent));
162
164
  }
163
165
 
164
166
  .form-header {
@@ -169,13 +171,13 @@ function _getFieldType(
169
171
  .form-title {
170
172
  font-size: var(--smrt-typography-headline-small-size, 1.5rem);
171
173
  font-weight: var(--smrt-typography-weight-semibold, 600);
172
- color: var(--smrt-color-on-surface, #1f2937);
174
+ color: var(--smrt-color-on-surface);
173
175
  margin: 0 0 0.5rem 0;
174
176
  }
175
177
 
176
178
  .form-subtitle {
177
179
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
178
- color: var(--smrt-color-on-surface-variant, #6b7280);
180
+ color: var(--smrt-color-on-surface-variant);
179
181
  font-style: italic;
180
182
  }
181
183
 
@@ -190,28 +192,29 @@ function _getFieldType(
190
192
  gap: 0.75rem;
191
193
  margin-top: 1.5rem;
192
194
  padding-top: 1.5rem;
193
- border-top: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
195
+ border-top: 1px solid var(--smrt-color-outline-variant);
194
196
  }
195
197
 
196
198
  .form-debug {
197
199
  margin-top: 2rem;
198
200
  padding: 1rem;
199
- background: var(--smrt-color-surface-container-low, #f9fafb);
201
+ background: var(--smrt-color-surface-container-low);
200
202
  border-radius: var(--smrt-radius-sm, 0.375rem);
201
- border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
203
+ border: 1px solid var(--smrt-color-outline-variant);
202
204
  }
203
205
 
204
206
  .form-debug summary {
205
207
  cursor: pointer;
206
208
  font-weight: var(--smrt-typography-weight-medium, 500);
207
- color: var(--smrt-color-on-surface, #374151);
209
+ color: var(--smrt-color-on-surface);
208
210
  }
209
211
 
210
212
  .form-debug pre {
211
213
  margin-top: 0.5rem;
212
214
  font-size: var(--smrt-typography-body-small-size, 0.75rem);
213
- color: var(--smrt-color-on-surface-variant, #6b7280);
215
+ color: var(--smrt-color-on-surface-variant);
214
216
  white-space: pre-wrap;
215
217
  word-break: break-word;
216
218
  }
219
+ }
217
220
  </style>
@@ -147,6 +147,8 @@ function handleObjectInput(event: Event) {
147
147
  </div>
148
148
 
149
149
  <style>
150
+ @layer smrt.reset, smrt.structure, smrt.theme;
151
+ @layer smrt.theme {
150
152
  .field-renderer {
151
153
  display: flex;
152
154
  flex-direction: column;
@@ -156,12 +158,12 @@ function handleObjectInput(event: Event) {
156
158
 
157
159
  .field-label {
158
160
  font-weight: var(--smrt-typography-weight-medium, 500);
159
- color: var(--smrt-color-on-surface, #374151);
161
+ color: var(--smrt-color-on-surface);
160
162
  font-size: var(--smrt-typography-label-large-size, 0.875rem);
161
163
  }
162
164
 
163
165
  .required {
164
- color: var(--smrt-color-error, #dc2626);
166
+ color: var(--smrt-color-error);
165
167
  }
166
168
 
167
169
  .field-checkbox {
@@ -171,7 +173,8 @@ function handleObjectInput(event: Event) {
171
173
 
172
174
  .field-hint {
173
175
  font-size: var(--smrt-typography-body-small-size, 0.75rem);
174
- color: var(--smrt-color-on-surface-variant, #6b7280);
176
+ color: var(--smrt-color-on-surface-variant);
175
177
  font-style: italic;
176
178
  }
179
+ }
177
180
  </style>
@@ -35,6 +35,8 @@ const _loading = $state(false);
35
35
  </div>
36
36
 
37
37
  <style>
38
+ @layer smrt.reset, smrt.structure, smrt.theme;
39
+ @layer smrt.theme {
38
40
  .category-manager {
39
41
  max-width: 800px;
40
42
  margin: 0 auto;
@@ -48,33 +50,34 @@ const _loading = $state(false);
48
50
 
49
51
  .manager-header h2 {
50
52
  margin: 0 0 0.5rem 0;
51
- color: var(--smrt-color-on-surface, #1f2937);
53
+ color: var(--smrt-color-on-surface);
52
54
  font-size: var(--smrt-typography-headline-small-size, 1.5rem);
53
55
  font-weight: var(--smrt-typography-weight-semibold, 600);
54
56
  }
55
57
 
56
58
  .manager-header p {
57
59
  margin: 0;
58
- color: var(--smrt-color-on-surface-variant, #6b7280);
60
+ color: var(--smrt-color-on-surface-variant);
59
61
  }
60
62
 
61
63
  .placeholder-content {
62
- background: var(--smrt-color-surface-container-low, #f9fafb);
63
- border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
64
- border-radius: var(--smrt-radius-md, 8px);
64
+ background: var(--smrt-color-surface-container-low);
65
+ border: 1px solid var(--smrt-color-outline-variant);
66
+ border-radius: var(--smrt-radius-md);
65
67
  padding: 2rem;
66
68
  text-align: center;
67
69
  }
68
70
 
69
71
  .placeholder-content p {
70
72
  margin: 0 0 1rem 0;
71
- color: var(--smrt-color-on-surface-variant, #6b7280);
73
+ color: var(--smrt-color-on-surface-variant);
72
74
  }
73
75
 
74
76
  .placeholder-content ul {
75
77
  margin: 1rem 0 0 0;
76
78
  text-align: left;
77
79
  display: inline-block;
78
- color: var(--smrt-color-on-surface-variant, #6b7280);
80
+ color: var(--smrt-color-on-surface-variant);
79
81
  }
82
+ }
80
83
  </style>
@@ -183,6 +183,8 @@ function handleCancelForm() {
183
183
  </div>
184
184
 
185
185
  <style>
186
+ @layer smrt.reset, smrt.structure, smrt.theme;
187
+ @layer smrt.theme {
186
188
  .product-catalog {
187
189
  max-width: 1200px;
188
190
  margin: 0 auto;
@@ -195,12 +197,12 @@ function handleCancelForm() {
195
197
  align-items: center;
196
198
  margin-bottom: 1.5rem;
197
199
  padding-bottom: 1rem;
198
- border-bottom: 2px solid var(--smrt-color-outline-variant, #e2e8f0);
200
+ border-bottom: 2px solid var(--smrt-color-outline-variant);
199
201
  }
200
202
 
201
203
  .catalog-header h2 {
202
204
  margin: 0;
203
- color: var(--smrt-color-on-surface, #1f2937);
205
+ color: var(--smrt-color-on-surface);
204
206
  font-size: var(--smrt-typography-headline-large-size, 1.875rem);
205
207
  font-weight: var(--smrt-typography-weight-bold, 700);
206
208
  }
@@ -209,7 +211,7 @@ function handleCancelForm() {
209
211
  display: flex;
210
212
  gap: 1.5rem;
211
213
  font-size: var(--smrt-typography-label-large-size, 0.875rem);
212
- color: var(--smrt-color-on-surface-variant, #6b7280);
214
+ color: var(--smrt-color-on-surface-variant);
213
215
  }
214
216
 
215
217
  .catalog-controls {
@@ -248,7 +250,7 @@ function handleCancelForm() {
248
250
  .loading-state, .error-state, .empty-state {
249
251
  text-align: center;
250
252
  padding: 3rem 1rem;
251
- color: var(--smrt-color-on-surface-variant, #6b7280);
253
+ color: var(--smrt-color-on-surface-variant);
252
254
  }
253
255
 
254
256
  /* Restore the retry button's spacing from the error message. The old
@@ -273,8 +275,8 @@ function handleCancelForm() {
273
275
  }
274
276
 
275
277
  .form-container {
276
- background: var(--smrt-color-surface, #fff);
277
- border-radius: var(--smrt-radius-md, 8px);
278
+ background: var(--smrt-color-surface);
279
+ border-radius: var(--smrt-radius-md);
278
280
  max-width: 500px;
279
281
  width: 90vw;
280
282
  max-height: 90vh;
@@ -284,8 +286,9 @@ function handleCancelForm() {
284
286
  .form-container h3 {
285
287
  margin: 0 0 1rem 0;
286
288
  padding: 1.5rem 1.5rem 0 1.5rem;
287
- color: var(--smrt-color-on-surface, #1f2937);
289
+ color: var(--smrt-color-on-surface);
288
290
  font-size: var(--smrt-typography-title-large-size, 1.25rem);
289
291
  font-weight: var(--smrt-typography-weight-semibold, 600);
290
292
  }
293
+ }
291
294
  </style>
@@ -2,7 +2,7 @@
2
2
  "version": "1.0.0",
3
3
  "timestamp": 0,
4
4
  "packageName": "@happyvertical/smrt-products",
5
- "packageVersion": "0.55.16",
5
+ "packageVersion": "0.55.19",
6
6
  "objects": {
7
7
  "@happyvertical/smrt-products:CategoryCollection": {
8
8
  "name": "categorycollection",
@@ -1,3 +1,3 @@
1
1
  import { a as Product, i as Material, n as ProductVariant, o as ProductType, r as ProductAsset, s as Category, t as Sku } from "./chunks/Sku-CdhhTtjd.js";
2
- import "./chunks/models-Buh7bo27.js";
2
+ import "./chunks/models-D2FZFimv.js";
3
3
  export { Category, Material, Product, ProductAsset, ProductType, ProductVariant, Sku };
@@ -3,12 +3,12 @@
3
3
  "sensitiveFieldsExcluded": true,
4
4
  "generatedAt": "1970-01-01T00:00:00.000Z",
5
5
  "packageName": "@happyvertical/smrt-products",
6
- "packageVersion": "0.55.16",
6
+ "packageVersion": "0.55.19",
7
7
  "sourceManifestPath": "dist/lib/manifest.json",
8
8
  "agentDocPath": "AGENTS.md",
9
9
  "sourceHashes": {
10
- "manifest": "459ded5d5f613ba6810ec9791e747f01415243e2bcaa6f2277b7f1ee1eced3cb",
11
- "packageJson": "b88e748fd88e2c1f6cfa8c7712c7d3528a7414754d27057c1e3deb3456c744c0",
10
+ "manifest": "20bee2410cacec39b176a1e628658863c3d55994d7ae317e3716f50c93b407f8",
11
+ "packageJson": "214d42afa6a6ad180ffd569f7e9258b593fba049647f45c669ccad88ee4bb891",
12
12
  "agents": "b5aa86a9c02bb81be5621ae3397ff2dedcef972a520c2ba2f56ee7abf5613b8c"
13
13
  },
14
14
  "exports": [