@happyvertical/smrt-products 0.34.6 → 0.34.7

package/dist/lib/chunks/{ProductForm-CukMCDEN.js → ProductForm-BLRguem5.js}

@@ -1,10 +1,11 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { Button } from "@happyvertical/smrt-ui/ui";
+import { Form, Input, Textarea } from "@happyvertical/smrt-ui/forms";
 import { defineMessages, useI18n } from "@happyvertical/smrt-ui/i18n";
 var root_1$1 = $.from_html(`<div class="product-manufacturer svelte-11ja2cl"> </div>`);
 var root_2$1 = $.from_html(`<div class="product-model svelte-11ja2cl"> </div>`);
-var root_3 = $.from_html(`<p class="product-description svelte-11ja2cl"> </p>`);
+var root_3$1 = $.from_html(`<p class="product-description svelte-11ja2cl"> </p>`);
 var root_4 = $.from_html(`<div class="product-category svelte-11ja2cl"> </div>`);
 var root_6 = $.from_html(`<span class="tag svelte-11ja2cl"> </span>`);
 var root_5 = $.from_html(`<div class="product-tags svelte-11ja2cl"></div>`);
@@ -46,7 +47,7 @@ function ProductCard($$anchor, $$props) {
   var node_2 = $.sibling(node_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var p = root_3();
+      var p = root_3$1();
       var text_3 = $.child(p, true);
       $.reset(p);
       $.template_effect(() => $.set_text(text_3, $$props.product.description));
@@ -224,9 +225,10 @@ const M = defineMessages({
   "products.product_catalog.create_first": "Create First Product",
   "products.product_catalog.no_match": "No products match your search criteria."
 });
-var root_1 = $.from_html(`<span class="error-message svelte-1hh5ovx"> </span>`);
 var root_2 = $.from_html(`<span class="error-message svelte-1hh5ovx"> </span>`);
-var root = $.from_html(`<form class="product-form svelte-1hh5ovx"><div class="form-group svelte-1hh5ovx"><label for="name" class="svelte-1hh5ovx"> </label> <input id="name" type="text"/> <!></div> <div class="form-group svelte-1hh5ovx"><label for="description" class="svelte-1hh5ovx">Description</label> <textarea id="description" class="form-textarea svelte-1hh5ovx" rows="3"></textarea></div> <div class="form-row svelte-1hh5ovx"><div class="form-group svelte-1hh5ovx"><label for="price" class="svelte-1hh5ovx">Price *</label> <input id="price" type="number" step="0.01" min="0" placeholder="0.00"/> <!></div> <div class="form-group svelte-1hh5ovx"><label for="category" class="svelte-1hh5ovx">Category</label> <input id="category" type="text" class="form-input svelte-1hh5ovx"/></div></div> <div class="form-group svelte-1hh5ovx"><label for="tags" class="svelte-1hh5ovx">Tags</label> <input id="tags" type="text" class="form-input svelte-1hh5ovx"/> <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></form>`);
+var root_3 = $.from_html(`<span class="error-message svelte-1hh5ovx"> </span>`);
+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);
+var root = $.from_html(`<div class="product-form-shell svelte-1hh5ovx"><!></div>`);
 function ProductForm($$anchor, $$props) {
   $.push($$props, true);
   const { t } = useI18n();
@@ -266,166 +268,250 @@ function ProductForm($$anchor, $$props) {
     };
     $$props.onSubmit(productData);
   }
-  var form = root();
-  var div = $.child(form);
-  var label = $.child(div);
-  var text = $.child(label, true);
-  $.reset(label);
-  var input = $.sibling(label, 2);
-  $.remove_input_defaults(input);
-  let classes;
-  var node = $.sibling(input, 2);
-  {
-    var consequent = ($$anchor2) => {
-      var span = root_1();
-      var text_1 = $.child(span, true);
-      $.reset(span);
-      $.template_effect(() => $.set_text(text_1, $.get(errors).name));
-      $.append($$anchor2, span);
-    };
-    $.if(node, ($$render) => {
-      if ($.get(errors).name) $$render(consequent);
-    });
-  }
-  $.reset(div);
-  var div_1 = $.sibling(div, 2);
-  var textarea = $.sibling($.child(div_1), 2);
-  $.remove_textarea_child(textarea);
-  $.reset(div_1);
-  var div_2 = $.sibling(div_1, 2);
-  var div_3 = $.child(div_2);
-  var input_1 = $.sibling($.child(div_3), 2);
-  $.remove_input_defaults(input_1);
-  let classes_1;
-  var node_1 = $.sibling(input_1, 2);
-  {
-    var consequent_1 = ($$anchor2) => {
-      var span_1 = root_2();
-      var text_2 = $.child(span_1, true);
-      $.reset(span_1);
-      $.template_effect(() => $.set_text(text_2, $.get(errors).price));
-      $.append($$anchor2, span_1);
-    };
-    $.if(node_1, ($$render) => {
-      if ($.get(errors).price) $$render(consequent_1);
-    });
-  }
-  $.reset(div_3);
-  var div_4 = $.sibling(div_3, 2);
-  var input_2 = $.sibling($.child(div_4), 2);
-  $.remove_input_defaults(input_2);
-  $.reset(div_4);
-  $.reset(div_2);
-  var div_5 = $.sibling(div_2, 2);
-  var input_3 = $.sibling($.child(div_5), 2);
-  $.remove_input_defaults(input_3);
-  var small = $.sibling(input_3, 2);
-  var text_3 = $.child(small, true);
-  $.reset(small);
-  $.reset(div_5);
-  var div_6 = $.sibling(div_5, 2);
-  var label_1 = $.child(div_6);
-  var input_4 = $.child(label_1);
-  $.remove_input_defaults(input_4);
-  var text_4 = $.sibling(input_4);
-  $.reset(label_1);
-  $.reset(div_6);
-  var div_7 = $.sibling(div_6, 2);
-  var node_2 = $.child(div_7);
-  {
-    var consequent_2 = ($$anchor2) => {
-      Button($$anchor2, {
-        type: "button",
-        variant: "secondary",
-        get onclick() {
-          return $$props.onCancel;
-        },
-        get disabled() {
-          return loading();
-        },
-        children: ($$anchor3, $$slotProps) => {
-          $.next();
-          var text_5 = $.text("Cancel");
-          $.append($$anchor3, text_5);
-        },
-        $$slots: { default: true }
-      });
-    };
-    $.if(node_2, ($$render) => {
-      if ($$props.onCancel) $$render(consequent_2);
-    });
-  }
-  var node_3 = $.sibling(node_2, 2);
-  Button(node_3, {
-    type: "submit",
-    variant: "primary",
-    get disabled() {
-      return loading();
-    },
+  var div = root();
+  var node = $.child(div);
+  Form(node, {
+    onsubmit: handleSubmit,
+    class: "product-form",
     children: ($$anchor2, $$slotProps) => {
-      var fragment_1 = $.comment();
-      var node_4 = $.first_child(fragment_1);
+      var fragment = root_1();
+      var div_1 = $.first_child(fragment);
+      var label = $.child(div_1);
+      var text = $.child(label, true);
+      $.reset(label);
+      var node_1 = $.sibling(label, 2);
       {
-        var consequent_3 = ($$anchor3) => {
-          var text_6 = $.text("Saving...");
-          $.append($$anchor3, text_6);
+        let $0 = $.derived(() => $.get(errors).name ? "error" : "");
+        let $1 = $.derived(() => t(M["products.product_form.name_placeholder"]));
+        Input(node_1, {
+          id: "name",
+          type: "text",
+          get disabled() {
+            return loading();
+          },
+          get class() {
+            return $.get($0);
+          },
+          get placeholder() {
+            return $.get($1);
+          },
+          get value() {
+            return formData.name;
+          },
+          set value($$value) {
+            formData.name = $$value;
+          }
+        });
+      }
+      var node_2 = $.sibling(node_1, 2);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_2();
+          var text_1 = $.child(span, true);
+          $.reset(span);
+          $.template_effect(() => $.set_text(text_1, $.get(errors).name));
+          $.append($$anchor3, span);
         };
-        var alternate = ($$anchor3) => {
-          var text_7 = $.text();
-          $.template_effect(() => $.set_text(text_7, product().id ? "Update Product" : "Create Product"));
-          $.append($$anchor3, text_7);
+        $.if(node_2, ($$render) => {
+          if ($.get(errors).name) $$render(consequent);
+        });
+      }
+      $.reset(div_1);
+      var div_2 = $.sibling(div_1, 2);
+      var node_3 = $.sibling($.child(div_2), 2);
+      {
+        let $0 = $.derived(() => t(M["products.product_form.description_placeholder"]));
+        Textarea(node_3, {
+          id: "description",
+          get disabled() {
+            return loading();
+          },
+          get placeholder() {
+            return $.get($0);
+          },
+          rows: 3,
+          get value() {
+            return formData.description;
+          },
+          set value($$value) {
+            formData.description = $$value;
+          }
+        });
+      }
+      $.reset(div_2);
+      var div_3 = $.sibling(div_2, 2);
+      var div_4 = $.child(div_3);
+      var node_4 = $.sibling($.child(div_4), 2);
+      {
+        let $0 = $.derived(() => $.get(errors).price ? "error" : "");
+        Input(node_4, {
+          id: "price",
+          type: "number",
+          step: "0.01",
+          min: "0",
+          get disabled() {
+            return loading();
+          },
+          get class() {
+            return $.get($0);
+          },
+          placeholder: "0.00",
+          get value() {
+            return formData.price;
+          },
+          set value($$value) {
+            formData.price = $$value;
+          }
+        });
+      }
+      var node_5 = $.sibling(node_4, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var span_1 = root_3();
+          var text_2 = $.child(span_1, true);
+          $.reset(span_1);
+          $.template_effect(() => $.set_text(text_2, $.get(errors).price));
+          $.append($$anchor3, span_1);
+        };
+        $.if(node_5, ($$render) => {
+          if ($.get(errors).price) $$render(consequent_1);
+        });
+      }
+      $.reset(div_4);
+      var div_5 = $.sibling(div_4, 2);
+      var node_6 = $.sibling($.child(div_5), 2);
+      {
+        let $0 = $.derived(() => t(M["products.product_form.category_placeholder"]));
+        Input(node_6, {
+          id: "category",
+          type: "text",
+          get disabled() {
+            return loading();
+          },
+          get placeholder() {
+            return $.get($0);
+          },
+          get value() {
+            return formData.category;
+          },
+          set value($$value) {
+            formData.category = $$value;
+          }
+        });
+      }
+      $.reset(div_5);
+      $.reset(div_3);
+      var div_6 = $.sibling(div_3, 2);
+      var node_7 = $.sibling($.child(div_6), 2);
+      {
+        let $0 = $.derived(() => t(M["products.product_form.tags_placeholder"]));
+        Input(node_7, {
+          id: "tags",
+          type: "text",
+          get disabled() {
+            return loading();
+          },
+          get placeholder() {
+            return $.get($0);
+          },
+          get value() {
+            return formData.tags;
+          },
+          set value($$value) {
+            formData.tags = $$value;
+          }
+        });
+      }
+      var small = $.sibling(node_7, 2);
+      var text_3 = $.child(small, true);
+      $.reset(small);
+      $.reset(div_6);
+      var div_7 = $.sibling(div_6, 2);
+      var label_1 = $.child(div_7);
+      var input = $.child(label_1);
+      $.remove_input_defaults(input);
+      var text_4 = $.sibling(input);
+      $.reset(label_1);
+      $.reset(div_7);
+      var div_8 = $.sibling(div_7, 2);
+      var node_8 = $.child(div_8);
+      {
+        var consequent_2 = ($$anchor3) => {
+          Button($$anchor3, {
+            type: "button",
+            variant: "secondary",
+            get onclick() {
+              return $$props.onCancel;
+            },
+            get disabled() {
+              return loading();
+            },
+            children: ($$anchor4, $$slotProps2) => {
+              $.next();
+              var text_5 = $.text("Cancel");
+              $.append($$anchor4, text_5);
+            },
+            $$slots: { default: true }
+          });
         };
-        $.if(node_4, ($$render) => {
-          if (loading()) $$render(consequent_3);
-          else $$render(alternate, -1);
+        $.if(node_8, ($$render) => {
+          if ($$props.onCancel) $$render(consequent_2);
         });
       }
-      $.append($$anchor2, fragment_1);
+      var node_9 = $.sibling(node_8, 2);
+      Button(node_9, {
+        type: "submit",
+        variant: "primary",
+        get disabled() {
+          return loading();
+        },
+        children: ($$anchor3, $$slotProps2) => {
+          var fragment_2 = $.comment();
+          var node_10 = $.first_child(fragment_2);
+          {
+            var consequent_3 = ($$anchor4) => {
+              var text_6 = $.text("Saving...");
+              $.append($$anchor4, text_6);
+            };
+            var alternate = ($$anchor4) => {
+              var text_7 = $.text();
+              $.template_effect(() => $.set_text(text_7, product().id ? "Update Product" : "Create Product"));
+              $.append($$anchor4, text_7);
+            };
+            $.if(node_10, ($$render) => {
+              if (loading()) $$render(consequent_3);
+              else $$render(alternate, -1);
+            });
+          }
+          $.append($$anchor3, fragment_2);
+        },
+        $$slots: { default: true }
+      });
+      $.reset(div_8);
+      $.template_effect(
+        ($0, $1, $2) => {
+          $.set_text(text, $0);
+          $.set_text(text_3, $1);
+          input.disabled = loading();
+          $.set_text(text_4, ` ${$2 ?? ""}`);
+        },
+        [
+          () => t(M["products.product_form.name_label"]),
+          () => t(M["products.product_form.tags_hint"]),
+          () => t(M["products.product_form.in_stock_label"])
+        ]
+      );
+      $.bind_checked(input, () => formData.inStock, ($$value) => formData.inStock = $$value);
+      $.append($$anchor2, fragment);
     },
     $$slots: { default: true }
   });
-  $.reset(div_7);
-  $.reset(form);
-  $.template_effect(
-    ($0, $1, $2, $3, $4, $5, $6) => {
-      $.set_text(text, $0);
-      input.disabled = loading();
-      classes = $.set_class(input, 1, "form-input svelte-1hh5ovx", null, classes, { error: $.get(errors).name });
-      $.set_attribute(input, "placeholder", $1);
-      textarea.disabled = loading();
-      $.set_attribute(textarea, "placeholder", $2);
-      input_1.disabled = loading();
-      classes_1 = $.set_class(input_1, 1, "form-input svelte-1hh5ovx", null, classes_1, { error: $.get(errors).price });
-      input_2.disabled = loading();
-      $.set_attribute(input_2, "placeholder", $3);
-      input_3.disabled = loading();
-      $.set_attribute(input_3, "placeholder", $4);
-      $.set_text(text_3, $5);
-      input_4.disabled = loading();
-      $.set_text(text_4, ` ${$6 ?? ""}`);
-    },
-    [
-      () => t(M["products.product_form.name_label"]),
-      () => t(M["products.product_form.name_placeholder"]),
-      () => t(M["products.product_form.description_placeholder"]),
-      () => t(M["products.product_form.category_placeholder"]),
-      () => t(M["products.product_form.tags_placeholder"]),
-      () => t(M["products.product_form.tags_hint"]),
-      () => t(M["products.product_form.in_stock_label"])
-    ]
-  );
-  $.event("submit", form, handleSubmit);
-  $.bind_value(input, () => formData.name, ($$value) => formData.name = $$value);
-  $.bind_value(textarea, () => formData.description, ($$value) => formData.description = $$value);
-  $.bind_value(input_1, () => formData.price, ($$value) => formData.price = $$value);
-  $.bind_value(input_2, () => formData.category, ($$value) => formData.category = $$value);
-  $.bind_value(input_3, () => formData.tags, ($$value) => formData.tags = $$value);
-  $.bind_checked(input_4, () => formData.inStock, ($$value) => formData.inStock = $$value);
-  $.append($$anchor, form);
+  $.reset(div);
+  $.append($$anchor, div);
   $.pop();
 }
 export {
   ProductCard as P,
   ProductForm as a
 };
-//# sourceMappingURL=ProductForm-CukMCDEN.js.map
+//# sourceMappingURL=ProductForm-BLRguem5.js.map

package/dist/lib/chunks/{ProductForm-CukMCDEN.js.map → ProductForm-BLRguem5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ProductForm-CukMCDEN.js","sources":["../../../src/lib/components/ProductCard.svelte","../../../src/lib/i18n.ts","../../../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  product: ProductData;\n  onEdit?: (product: ProductData) => void;\n  onDelete?: (id: string) => void;\n}\n\nconst { product, onEdit, onDelete }: Props = $props();\n</script>\n\n<div class=\"product-card\">\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  .product-card {\n    border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);\n    border-radius: var(--smrt-radius-md, 8px);\n    padding: 1rem;\n    background: var(--smrt-color-surface, #fff);\n    box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow, #000) 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, #000) 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, #1f2937);\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, #6b7280);\n  }\n\n  .product-model {\n    font-size: var(--smrt-typography-body-medium-size, 0.875rem);\n    color: var(--smrt-color-on-surface-variant, #6b7280);\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, #374151);\n    background: var(--smrt-color-surface-container, #f3f4f6);\n    padding: 0.25rem 0.5rem;\n    border-radius: var(--smrt-radius-sm, 4px);\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, #6b7280);\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, #f3f4f6);\n    color: var(--smrt-color-on-surface, #374151);\n    padding: 0.125rem 0.5rem;\n    border-radius: var(--smrt-radius-full, 9999px);\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, #f3f4f6);\n  }\n</style>","import { defineMessages } from '@happyvertical/smrt-ui/i18n';\n\nexport const M = defineMessages({\n  // App\n  'products.app.categories_coming_soon': 'Category management coming soon...',\n  'products.app.analytics_coming_soon': 'Analytics dashboard coming soon...',\n\n  // AppLayout\n  'products.app_layout.service_title': 'Product Service',\n  'products.app_layout.footer_copyright':\n    '2024 SMRT Product Service - Auto-generated with ❤️',\n  'products.app_layout.api_docs': 'API Docs',\n  'products.app_layout.mcp_tools': 'MCP Tools',\n\n  // DemoPage\n  'products.demo_page.title': 'SMRT Framework Demo',\n  'products.demo_page.subtitle':\n    'Define Once, Consume Everywhere - Progressive Customization',\n  'products.demo_page.custom_components_tab': 'Custom Components',\n  'products.demo_page.auto_generated_heading':\n    'Auto-Generated UI from SMRT Object',\n  'products.demo_page.auto_generated_description':\n    'This form is automatically generated from the Product class definition.\\n          The field types, labels, and validation rules are inferred from the TypeScript schema.',\n  'products.demo_page.generated_form_heading': 'Generated Form',\n  'products.demo_page.auto_form_title': 'Auto-Generated Product Form',\n  'products.demo_page.generated_display_heading': 'Generated Display',\n  'products.demo_page.custom_components_heading':\n    'Custom Components with SMRT Integration',\n  'products.demo_page.custom_components_description':\n    'These are hand-crafted components that still leverage the SMRT data structure\\n          but provide custom UI/UX for specific business requirements.',\n  'products.demo_page.custom_form_heading': 'Custom Form',\n  'products.demo_page.custom_display_heading': 'Custom Display',\n  'products.demo_page.progressive_heading': 'Progressive Customization',\n  'products.demo_page.progressive_description':\n    'Start with auto-generated components, then progressively customize as needed.\\n          Both approaches use the same underlying SMRT Product model.',\n  'products.demo_page.feature_zero_config': '✅ Zero configuration',\n  'products.demo_page.feature_instant_ui': '✅ Instant UI from schema',\n  'products.demo_page.feature_type_safe': '✅ Type-safe by default',\n  'products.demo_page.feature_prototyping': '⚡ Perfect for prototyping',\n  'products.demo_page.custom_components_label': '🎨 Custom Components',\n  'products.demo_page.feature_tailored_ux': '✅ Tailored UX',\n  'products.demo_page.feature_business_workflows':\n    '✅ Business-specific workflows',\n  'products.demo_page.feature_advanced_interactions':\n    '✅ Advanced interactions',\n  'products.demo_page.simple_auto_form_title': 'Auto Form',\n  'products.demo_page.benefits_heading': 'SMRT Framework Benefits',\n  'products.demo_page.benefit_define_once_label': 'Define Once:',\n  'products.demo_page.benefit_define_once_text':\n    'Product class with @smrt decorator',\n  'products.demo_page.benefit_auto_generate_label': 'Auto-Generate:',\n  'products.demo_page.benefit_auto_generate_text':\n    'REST APIs, MCP tools, TypeScript clients, default UI',\n  'products.demo_page.benefit_progressive_label': 'Progressive Enhancement:',\n  'products.demo_page.benefit_progressive_text':\n    'Start with defaults, customize as needed',\n  'products.demo_page.benefit_type_safety_label': 'Type Safety:',\n  'products.demo_page.benefit_type_safety_text':\n    'End-to-end TypeScript integration',\n  'products.demo_page.benefit_multiple_consumption_label':\n    'Multiple Consumption:',\n  'products.demo_page.benefit_multiple_consumption_text':\n    'Library, federation, standalone',\n\n  // ProductsPage\n  'products.products_page.description':\n    'Manage your product catalog with auto-generated CRUD operations, \\n          real-time updates, and AI-powered tools via MCP.',\n  'products.products_page.auto_generated_text':\n    'REST API endpoints automatically created from @smrt() decorated Product class',\n  'products.products_page.ai_ready_heading': '🤖 AI Ready',\n  'products.products_page.ai_ready_text':\n    'MCP tools available for Claude and other AI models to interact with products',\n  'products.products_page.federatable_text':\n    'Components can be consumed by other applications via module federation',\n  'products.products_page.library_text':\n    'Install as NPM package: npm install @have/smrt-template',\n\n  // ProductForm\n  'products.product_form.name_label': 'Product Name *',\n  'products.product_form.name_placeholder': 'Enter product name',\n  'products.product_form.description_placeholder':\n    'Product description (optional)',\n  'products.product_form.category_placeholder': 'Product category',\n  'products.product_form.tags_placeholder': 'tag1, tag2, tag3',\n  'products.product_form.tags_hint': 'Separate tags with commas',\n  'products.product_form.in_stock_label': 'In Stock',\n\n  // TestComponent\n  'products.test_component.title': 'Test Component',\n\n  // AutoForm\n  'products.auto_form.subtitle': 'Auto-generated from SMRT Product model',\n  'products.auto_form.debug_summary': 'Form Data (Debug)',\n\n  // FieldRenderer\n  'products.field_renderer.array_hint': 'Enter values separated by commas',\n  'products.field_renderer.object_hint': 'Enter valid JSON',\n\n  // CategoryManager\n  'products.category_manager.title': 'Category Manager',\n  'products.category_manager.subtitle': 'Manage product categories',\n  'products.category_manager.coming_soon':\n    'Category management feature coming soon...',\n  'products.category_manager.will_include': 'This will include:',\n  'products.category_manager.create_edit': 'Create and edit categories',\n  'products.category_manager.organize_hierarchy': 'Organize category hierarchy',\n  'products.category_manager.manage_permissions': 'Manage category permissions',\n  'products.category_manager.analytics': 'Category analytics',\n\n  // ProductCatalog\n  'products.product_catalog.title': 'Product Catalog',\n  'products.product_catalog.in_stock': 'in stock',\n  'products.product_catalog.total_value': 'Total value:',\n  'products.product_catalog.search_placeholder': 'Search products...',\n  'products.product_catalog.all_categories': 'All Categories',\n  'products.product_catalog.add_product': 'Add Product',\n  'products.product_catalog.loading': 'Loading products...',\n  'products.product_catalog.empty':\n    'No products yet. Create your first product to get started!',\n  'products.product_catalog.create_first': 'Create First Product',\n  'products.product_catalog.no_match':\n    'No products match your search criteria.',\n});\n","<script lang=\"ts\">\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?: Partial<ProductData>;\n  onSubmit: (product: Partial<ProductData>) => void;\n  onCancel?: () => void;\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<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=\"form-input\"\n      class:error={errors.name}\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      class=\"form-textarea\"\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=\"form-input\"\n        class:error={errors.price}\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        class=\"form-input\"\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      class=\"form-input\"\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      <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\n<style>\n  .product-form {\n    max-width: 500px;\n    padding: 1.5rem;\n    background: var(--smrt-color-surface, #fff);\n    border-radius: var(--smrt-radius-md, 8px);\n    border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);\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, #374151);\n    font-size: var(--smrt-typography-label-large-size, 0.875rem);\n  }\n\n  .form-input, .form-textarea {\n    width: 100%;\n    padding: 0.5rem;\n    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);\n    border-radius: var(--smrt-radius-sm, 4px);\n    font-size: var(--smrt-typography-body-medium-size, 0.875rem);\n    transition: border-color 0.2s;\n  }\n\n  .form-input:focus, .form-textarea:focus {\n    outline: none;\n    border-color: var(--smrt-color-primary, #3b82f6);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #3b82f6) 10%, transparent);\n  }\n\n  .form-input.error {\n    border-color: var(--smrt-color-error, #dc2626);\n  }\n  \n  .form-textarea {\n    resize: vertical;\n    min-height: 80px;\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, #6b7280);\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, #dc2626);\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, #f3f4f6);\n  }\n</style>"],"names":["root","root_1","root_2","$$anchor"],"mappings":"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"}
+{"version":3,"file":"ProductForm-BLRguem5.js","sources":["../../../src/lib/components/ProductCard.svelte","../../../src/lib/i18n.ts","../../../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  product: ProductData;\n  onEdit?: (product: ProductData) => void;\n  onDelete?: (id: string) => void;\n}\n\nconst { product, onEdit, onDelete }: Props = $props();\n</script>\n\n<div class=\"product-card\">\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  .product-card {\n    border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);\n    border-radius: var(--smrt-radius-md, 8px);\n    padding: 1rem;\n    background: var(--smrt-color-surface, #fff);\n    box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow, #000) 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, #000) 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, #1f2937);\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, #6b7280);\n  }\n\n  .product-model {\n    font-size: var(--smrt-typography-body-medium-size, 0.875rem);\n    color: var(--smrt-color-on-surface-variant, #6b7280);\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, #374151);\n    background: var(--smrt-color-surface-container, #f3f4f6);\n    padding: 0.25rem 0.5rem;\n    border-radius: var(--smrt-radius-sm, 4px);\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, #6b7280);\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, #f3f4f6);\n    color: var(--smrt-color-on-surface, #374151);\n    padding: 0.125rem 0.5rem;\n    border-radius: var(--smrt-radius-full, 9999px);\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, #f3f4f6);\n  }\n</style>","import { defineMessages } from '@happyvertical/smrt-ui/i18n';\n\nexport const M = defineMessages({\n  // App\n  'products.app.categories_coming_soon': 'Category management coming soon...',\n  'products.app.analytics_coming_soon': 'Analytics dashboard coming soon...',\n\n  // AppLayout\n  'products.app_layout.service_title': 'Product Service',\n  'products.app_layout.footer_copyright':\n    '2024 SMRT Product Service - Auto-generated with ❤️',\n  'products.app_layout.api_docs': 'API Docs',\n  'products.app_layout.mcp_tools': 'MCP Tools',\n\n  // DemoPage\n  'products.demo_page.title': 'SMRT Framework Demo',\n  'products.demo_page.subtitle':\n    'Define Once, Consume Everywhere - Progressive Customization',\n  'products.demo_page.custom_components_tab': 'Custom Components',\n  'products.demo_page.auto_generated_heading':\n    'Auto-Generated UI from SMRT Object',\n  'products.demo_page.auto_generated_description':\n    'This form is automatically generated from the Product class definition.\\n          The field types, labels, and validation rules are inferred from the TypeScript schema.',\n  'products.demo_page.generated_form_heading': 'Generated Form',\n  'products.demo_page.auto_form_title': 'Auto-Generated Product Form',\n  'products.demo_page.generated_display_heading': 'Generated Display',\n  'products.demo_page.custom_components_heading':\n    'Custom Components with SMRT Integration',\n  'products.demo_page.custom_components_description':\n    'These are hand-crafted components that still leverage the SMRT data structure\\n          but provide custom UI/UX for specific business requirements.',\n  'products.demo_page.custom_form_heading': 'Custom Form',\n  'products.demo_page.custom_display_heading': 'Custom Display',\n  'products.demo_page.progressive_heading': 'Progressive Customization',\n  'products.demo_page.progressive_description':\n    'Start with auto-generated components, then progressively customize as needed.\\n          Both approaches use the same underlying SMRT Product model.',\n  'products.demo_page.feature_zero_config': '✅ Zero configuration',\n  'products.demo_page.feature_instant_ui': '✅ Instant UI from schema',\n  'products.demo_page.feature_type_safe': '✅ Type-safe by default',\n  'products.demo_page.feature_prototyping': '⚡ Perfect for prototyping',\n  'products.demo_page.custom_components_label': '🎨 Custom Components',\n  'products.demo_page.feature_tailored_ux': '✅ Tailored UX',\n  'products.demo_page.feature_business_workflows':\n    '✅ Business-specific workflows',\n  'products.demo_page.feature_advanced_interactions':\n    '✅ Advanced interactions',\n  'products.demo_page.simple_auto_form_title': 'Auto Form',\n  'products.demo_page.benefits_heading': 'SMRT Framework Benefits',\n  'products.demo_page.benefit_define_once_label': 'Define Once:',\n  'products.demo_page.benefit_define_once_text':\n    'Product class with @smrt decorator',\n  'products.demo_page.benefit_auto_generate_label': 'Auto-Generate:',\n  'products.demo_page.benefit_auto_generate_text':\n    'REST APIs, MCP tools, TypeScript clients, default UI',\n  'products.demo_page.benefit_progressive_label': 'Progressive Enhancement:',\n  'products.demo_page.benefit_progressive_text':\n    'Start with defaults, customize as needed',\n  'products.demo_page.benefit_type_safety_label': 'Type Safety:',\n  'products.demo_page.benefit_type_safety_text':\n    'End-to-end TypeScript integration',\n  'products.demo_page.benefit_multiple_consumption_label':\n    'Multiple Consumption:',\n  'products.demo_page.benefit_multiple_consumption_text':\n    'Library, federation, standalone',\n\n  // ProductsPage\n  'products.products_page.description':\n    'Manage your product catalog with auto-generated CRUD operations, \\n          real-time updates, and AI-powered tools via MCP.',\n  'products.products_page.auto_generated_text':\n    'REST API endpoints automatically created from @smrt() decorated Product class',\n  'products.products_page.ai_ready_heading': '🤖 AI Ready',\n  'products.products_page.ai_ready_text':\n    'MCP tools available for Claude and other AI models to interact with products',\n  'products.products_page.federatable_text':\n    'Components can be consumed by other applications via module federation',\n  'products.products_page.library_text':\n    'Install as NPM package: npm install @have/smrt-template',\n\n  // ProductForm\n  'products.product_form.name_label': 'Product Name *',\n  'products.product_form.name_placeholder': 'Enter product name',\n  'products.product_form.description_placeholder':\n    'Product description (optional)',\n  'products.product_form.category_placeholder': 'Product category',\n  'products.product_form.tags_placeholder': 'tag1, tag2, tag3',\n  'products.product_form.tags_hint': 'Separate tags with commas',\n  'products.product_form.in_stock_label': 'In Stock',\n\n  // TestComponent\n  'products.test_component.title': 'Test Component',\n\n  // AutoForm\n  'products.auto_form.subtitle': 'Auto-generated from SMRT Product model',\n  'products.auto_form.debug_summary': 'Form Data (Debug)',\n\n  // FieldRenderer\n  'products.field_renderer.array_hint': 'Enter values separated by commas',\n  'products.field_renderer.object_hint': 'Enter valid JSON',\n\n  // CategoryManager\n  'products.category_manager.title': 'Category Manager',\n  'products.category_manager.subtitle': 'Manage product categories',\n  'products.category_manager.coming_soon':\n    'Category management feature coming soon...',\n  'products.category_manager.will_include': 'This will include:',\n  'products.category_manager.create_edit': 'Create and edit categories',\n  'products.category_manager.organize_hierarchy': 'Organize category hierarchy',\n  'products.category_manager.manage_permissions': 'Manage category permissions',\n  'products.category_manager.analytics': 'Category analytics',\n\n  // ProductCatalog\n  'products.product_catalog.title': 'Product Catalog',\n  'products.product_catalog.in_stock': 'in stock',\n  'products.product_catalog.total_value': 'Total value:',\n  'products.product_catalog.search_placeholder': 'Search products...',\n  'products.product_catalog.all_categories': 'All Categories',\n  'products.product_catalog.add_product': 'Add Product',\n  'products.product_catalog.loading': 'Loading products...',\n  'products.product_catalog.empty':\n    'No products yet. Create your first product to get started!',\n  'products.product_catalog.create_first': 'Create First Product',\n  'products.product_catalog.no_match':\n    'No products match your search criteria.',\n});\n","<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?: Partial<ProductData>;\n  onSubmit: (product: Partial<ProductData>) => void;\n  onCancel?: () => void;\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\">\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  .product-form-shell :global(.product-form) {\n    max-width: 500px;\n    padding: 1.5rem;\n    background: var(--smrt-color-surface, #fff);\n    border-radius: var(--smrt-radius-md, 8px);\n    border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);\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, #374151);\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, #dc2626);\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, #6b7280);\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, #dc2626);\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, #f3f4f6);\n  }\n</style>"],"names":["root","root_1","root_2","root_3","$$anchor"],"mappings":"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"}

package/dist/lib/components.js

@@ -1,4 +1,4 @@
-import { P, a } from "./chunks/ProductForm-CukMCDEN.js";
+import { P, a } from "./chunks/ProductForm-BLRguem5.js";
 export {
   P as ProductCard,
   a as ProductForm

package/dist/lib/index.js

@@ -6,7 +6,7 @@ import { default as default3 } from "@smrt/mcp";
 import { default as default4 } from "@smrt/routes";
 import { C, M, P, a, S } from "./chunks/SkuCollection-f_a3k93c.js";
 import { ProductAssetCollection } from "./chunks/ProductAssetCollection-B93HdSlX.js";
-import { P as P2, a as a2 } from "./chunks/ProductForm-CukMCDEN.js";
+import { P as P2, a as a2 } from "./chunks/ProductForm-BLRguem5.js";
 import { a as a3 } from "./chunks/index-i3-ci1FB.js";
 import { P as Product, C as Category } from "./chunks/Sku-sl6xf1PR.js";
 import { M as M2, a as a4, b, c, S as S2 } from "./chunks/Sku-sl6xf1PR.js";

package/dist/lib/lib/components/ProductForm.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Form, Input, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../i18n.js';
@@ -66,128 +67,126 @@ function handleSubmit(event: Event) {
 }
 </script>
 
-<form onsubmit={handleSubmit} class="product-form">
-  <div class="form-group">
-    <label for="name">{t(M['products.product_form.name_label'])}</label>
-    <input
-      id="name"
-      type="text"
-      bind:value={formData.name}
-      disabled={loading}
-      class="form-input"
-      class:error={errors.name}
-      placeholder={t(M['products.product_form.name_placeholder'])}
-    />
-    {#if errors.name}
-      <span class="error-message">{errors.name}</span>
-    {/if}
-  </div>
-
-  <div class="form-group">
-    <label for="description">Description</label>
-    <textarea
-      id="description"
-      bind:value={formData.description}
-      disabled={loading}
-      class="form-textarea"
-      placeholder={t(M['products.product_form.description_placeholder'])}
-      rows="3"
-    ></textarea>
-  </div>
-
-  <div class="form-row">
+<div class="product-form-shell">
+  <Form onsubmit={handleSubmit} class="product-form">
     <div class="form-group">
-      <label for="price">Price *</label>
-      <input
-        id="price"
-        type="number"
-        step="0.01"
-        min="0"
-        bind:value={formData.price}
+      <label for="name">{t(M['products.product_form.name_label'])}</label>
+      <Input
+        id="name"
+        type="text"
+        bind:value={formData.name}
         disabled={loading}
-        class="form-input"
-        class:error={errors.price}
-        placeholder="0.00"
+        class={errors.name ? 'error' : ''}
+        placeholder={t(M['products.product_form.name_placeholder'])}
       />
-      {#if errors.price}
-        <span class="error-message">{errors.price}</span>
+      {#if errors.name}
+        <span class="error-message">{errors.name}</span>
       {/if}
     </div>
 
     <div class="form-group">
-      <label for="category">Category</label>
-      <input
-        id="category"
-        type="text"
-        bind:value={formData.category}
+      <label for="description">Description</label>
+      <Textarea
+        id="description"
+        bind:value={formData.description}
         disabled={loading}
-        class="form-input"
-        placeholder={t(M['products.product_form.category_placeholder'])}
-      />
+        placeholder={t(M['products.product_form.description_placeholder'])}
+        rows={3}
+      ></Textarea>
+    </div>
+
+    <div class="form-row">
+      <div class="form-group">
+        <label for="price">Price *</label>
+        <Input
+          id="price"
+          type="number"
+          step="0.01"
+          min="0"
+          bind:value={formData.price}
+          disabled={loading}
+          class={errors.price ? 'error' : ''}
+          placeholder="0.00"
+        />
+        {#if errors.price}
+          <span class="error-message">{errors.price}</span>
+        {/if}
+      </div>
+
+      <div class="form-group">
+        <label for="category">Category</label>
+        <Input
+          id="category"
+          type="text"
+          bind:value={formData.category}
+          disabled={loading}
+          placeholder={t(M['products.product_form.category_placeholder'])}
+        />
+      </div>
     </div>
-  </div>
-
-  <div class="form-group">
-    <label for="tags">Tags</label>
-    <input
-      id="tags"
-      type="text"
-      bind:value={formData.tags}
-      disabled={loading}
-      class="form-input"
-      placeholder={t(M['products.product_form.tags_placeholder'])}
-    />
-    <small class="form-hint">{t(M['products.product_form.tags_hint'])}</small>
-  </div>
-
-  <div class="form-group">
-    <label class="checkbox-label">
-      <input
-        type="checkbox"
-        bind:checked={formData.inStock}
+
+    <div class="form-group">
+      <label for="tags">Tags</label>
+      <Input
+        id="tags"
+        type="text"
+        bind:value={formData.tags}
         disabled={loading}
-        class="form-checkbox"
+        placeholder={t(M['products.product_form.tags_placeholder'])}
       />
-      {t(M['products.product_form.in_stock_label'])}
-    </label>
-  </div>
-
-  <div class="form-actions">
-    {#if onCancel}
-      <Button type="button" variant="secondary" onclick={onCancel} disabled={loading}>
-        Cancel
-      </Button>
-    {/if}
+      <small class="form-hint">{t(M['products.product_form.tags_hint'])}</small>
+    </div>
 
-    <Button type="submit" variant="primary" disabled={loading}>
-      {#if loading}
-        Saving...
-      {:else}
-        {product.id ? 'Update Product' : 'Create Product'}
+    <div class="form-group">
+      <label class="checkbox-label">
+        <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
+        <input
+          type="checkbox"
+          bind:checked={formData.inStock}
+          disabled={loading}
+          class="form-checkbox"
+        />
+        {t(M['products.product_form.in_stock_label'])}
+      </label>
+    </div>
+
+    <div class="form-actions">
+      {#if onCancel}
+        <Button type="button" variant="secondary" onclick={onCancel} disabled={loading}>
+          Cancel
+        </Button>
       {/if}
-    </Button>
-  </div>
-</form>
+
+      <Button type="submit" variant="primary" disabled={loading}>
+        {#if loading}
+          Saving...
+        {:else}
+          {product.id ? 'Update Product' : 'Create Product'}
+        {/if}
+      </Button>
+    </div>
+  </Form>
+</div>
 
 <style>
-  .product-form {
+  .product-form-shell :global(.product-form) {
     max-width: 500px;
     padding: 1.5rem;
     background: var(--smrt-color-surface, #fff);
     border-radius: var(--smrt-radius-md, 8px);
     border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
   }
-  
+
   .form-group {
     margin-bottom: 1rem;
   }
-  
+
   .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
   }
-  
+
   label {
     display: block;
     margin-bottom: 0.25rem;
@@ -196,30 +195,13 @@ function handleSubmit(event: Event) {
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
   }
 
-  .form-input, .form-textarea {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-sm, 4px);
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    transition: border-color 0.2s;
-  }
-
-  .form-input:focus, .form-textarea:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #3b82f6);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #3b82f6) 10%, transparent);
-  }
-
-  .form-input.error {
+  /* Error border on the migrated <Input>. The primitive renders the inner
+     <input class="input error"> inside its own component, so the scoped class
+     can't reach it without :global (#1589). */
+  .product-form-shell :global(.input.error) {
     border-color: var(--smrt-color-error, #dc2626);
   }
-  
-  .form-textarea {
-    resize: vertical;
-    min-height: 80px;
-  }
-  
+
   .checkbox-label {
     display: flex;
     align-items: center;

package/dist/lib/lib/components/ProductForm.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductForm.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/ProductForm.svelte"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA2HD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProductForm.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/ProductForm.svelte"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA+HD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/lib/lib/components/auto-generated/AutoForm.svelte

@@ -4,6 +4,7 @@
  * Demonstrates "Define Once, Consume Everywhere" - form is generated from Product class definition
  */
 
+import { Form } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.js';
@@ -113,31 +114,33 @@ function _getFieldType(
     </div>
   </header>
 
-  <form class="form-content" onsubmit={handleSubmit}>
-    {#each fieldSchema as field}
-      <FieldRenderer
-        fieldName={field.name}
-        fieldType={field.type}
-        value={formData[field.name]}
-        label={field.label}
-        placeholder={field.placeholder}
-        required={field.required || false}
-        {readonly}
-        onUpdate={(value) => updateField(field.name, value)}
-      />
-    {/each}
-
-    {#if !readonly}
-      <div class="form-actions">
-        <Button type="submit" variant="primary">
-          {submitLabel}
-        </Button>
-        <Button type="button" variant="secondary" onclick={() => formData = {}}>
-          Reset
-        </Button>
-      </div>
-    {/if}
-  </form>
+  <div class="form-content-shell">
+    <Form class="form-content" onsubmit={handleSubmit}>
+      {#each fieldSchema as field}
+        <FieldRenderer
+          fieldName={field.name}
+          fieldType={field.type}
+          value={formData[field.name]}
+          label={field.label}
+          placeholder={field.placeholder}
+          required={field.required || false}
+          {readonly}
+          onUpdate={(value) => updateField(field.name, value)}
+        />
+      {/each}
+
+      {#if !readonly}
+        <div class="form-actions">
+          <Button type="submit" variant="primary">
+            {submitLabel}
+          </Button>
+          <Button type="button" variant="secondary" onclick={() => formData = {}}>
+            Reset
+          </Button>
+        </div>
+      {/if}
+    </Form>
+  </div>
 
   <!-- Demo: Show current form state -->
   <details class="form-debug">
@@ -174,7 +177,7 @@ function _getFieldType(
     font-style: italic;
   }
 
-  .form-content {
+  .form-content-shell :global(.form-content) {
     display: flex;
     flex-direction: column;
     gap: 1rem;

package/dist/lib/lib/components/auto-generated/AutoForm.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoForm.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/auto-generated/AutoForm.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC;AAoID,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AutoForm.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/auto-generated/AutoForm.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC;AAuID,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/lib/lib/components/auto-generated/FieldRenderer.svelte

@@ -4,6 +4,7 @@
  * This demonstrates the "Define Once, Consume Everywhere" vision
  */
 
+import { Input, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../../i18n.js';
 
@@ -92,10 +93,9 @@ function handleObjectInput(event: Event) {
   </label>
 
   {#if fieldType === 'string'}
-    <input
+    <Input
       id={fieldId}
       type="text"
-      class="field-input"
       {value}
       {placeholder}
       {readonly}
@@ -103,10 +103,9 @@ function handleObjectInput(event: Event) {
       oninput={handleStringInput}
     />
   {:else if fieldType === 'number'}
-    <input
+    <Input
       id={fieldId}
       type="number"
-      class="field-input"
       value={value || 0}
       {placeholder}
       {readonly}
@@ -114,6 +113,7 @@ function handleObjectInput(event: Event) {
       oninput={handleNumberInput}
     />
   {:else if fieldType === 'boolean'}
+    <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
     <input
       id={fieldId}
       type="checkbox"
@@ -123,26 +123,24 @@ function handleObjectInput(event: Event) {
       onchange={handleBooleanInput}
     />
   {:else if fieldType === 'array'}
-    <textarea
+    <Textarea
       id={fieldId}
-      class="field-textarea"
       value={Array.isArray(value) ? value.join(', ') : ''}
       placeholder={placeholder || 'Enter comma-separated values'}
       {readonly}
       {required}
       oninput={handleArrayInput}
-    />
+    ></Textarea>
     <div class="field-hint">{t(M['products.field_renderer.array_hint'])}</div>
   {:else if fieldType === 'object'}
-    <textarea
+    <Textarea
       id={fieldId}
-      class="field-textarea"
       value={typeof value === 'object' ? JSON.stringify(value, null, 2) : '{}'}
       placeholder={placeholder || 'Enter JSON object'}
       {readonly}
       {required}
       oninput={handleObjectInput}
-    />
+    ></Textarea>
     <div class="field-hint">{t(M['products.field_renderer.object_hint'])}</div>
   {/if}
 </div>
@@ -165,27 +163,6 @@ function handleObjectInput(event: Event) {
     color: var(--smrt-color-error, #dc2626);
   }
 
-  .field-input,
-  .field-textarea {
-    padding: 0.5rem 0.75rem;
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-sm, 0.375rem);
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    transition: border-color 0.2s, box-shadow 0.2s;
-  }
-
-  .field-input:focus,
-  .field-textarea:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #3b82f6);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #3b82f6) 10%, transparent);
-  }
-
-  .field-textarea {
-    min-height: 4rem;
-    resize: vertical;
-  }
-
   .field-checkbox {
     width: 1rem;
     height: 1rem;
@@ -196,10 +173,4 @@ function handleObjectInput(event: Event) {
     color: var(--smrt-color-on-surface-variant, #6b7280);
     font-style: italic;
   }
-
-  .field-input:read-only,
-  .field-textarea:read-only {
-    background-color: var(--smrt-color-surface-container-low, #f9fafb);
-    cursor: not-allowed;
-  }
 </style>

package/dist/lib/lib/components/auto-generated/FieldRenderer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldRenderer.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/auto-generated/FieldRenderer.svelte.ts"],"names":[],"mappings":"AAWA,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IAChE,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACjC;AAmGD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FieldRenderer.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/auto-generated/FieldRenderer.svelte.ts"],"names":[],"mappings":"AAYA,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IAChE,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACjC;AAqGD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/lib/lib/features/ProductCatalog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import { onMount } from 'svelte';
@@ -103,20 +104,20 @@ function handleCancelForm() {
   
   <div class="catalog-controls">
     <div class="search-filters">
-      <input
+      <Input
         type="text"
         bind:value={searchQuery}
         placeholder={t(M['products.product_catalog.search_placeholder'])}
         aria-label={t(M['products.product_catalog.search_placeholder'])}
         class="search-input"
       />
-      
-      <select bind:value={selectedCategory} class="category-filter">
+
+      <Select bind:value={selectedCategory} class="category-filter">
         <option value="">{t(M['products.product_catalog.all_categories'])}</option>
         {#each productStore.categories as category}
           <option value={category}>{category}</option>
         {/each}
-      </select>
+      </Select>
     </div>
     
     {#if !readonly && (showCreateForm || productStore.items.length === 0)}
@@ -224,20 +225,17 @@ function handleCancelForm() {
     gap: 0.75rem;
     flex: 1;
   }
-  
-  .search-input, .category-filter {
-    padding: 0.5rem;
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-sm, 4px);
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-  }
-  
-  .search-input {
+
+  /* Layout sizing for the migrated <Input>/<Select>. The primitives render the
+     inner element with the forwarded class, so pierce with :global to keep the
+     flex sizing the old scoped rules supplied (#1589); padding/border/font come
+     from the primitives' tokenised styling now. */
+  .search-filters :global(.search-input) {
     flex: 1;
     max-width: 300px;
   }
-  
-  .category-filter {
+
+  .search-filters :global(.category-filter) {
     min-width: 150px;
   }
   

package/dist/lib/lib/features/ProductCatalog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCatalog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/features/ProductCatalog.svelte"],"names":[],"mappings":"AAaA,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAoKD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ProductCatalog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/features/ProductCatalog.svelte"],"names":[],"mappings":"AAcA,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAqKD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/lib/manifest.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
-  "timestamp": 1782278452967,
+  "timestamp": 1782290137787,
   "packageName": "@happyvertical/smrt-products",
-  "packageVersion": "0.34.6",
+  "packageVersion": "0.34.7",
   "objects": {
     "@happyvertical/smrt-products:CategoryCollection": {
       "name": "categorycollection",

package/dist/lib/smrt-knowledge.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-06-24T05:20:53.581Z",
+  "generatedAt": "2026-06-24T08:35:38.290Z",
   "packageName": "@happyvertical/smrt-products",
-  "packageVersion": "0.34.6",
+  "packageVersion": "0.34.7",
   "sourceManifestPath": "dist/lib/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "584ad2da857b7180b8a585c41e0975b7743a07f6ad3ffc172186e396cd814cb7",
-    "packageJson": "5a90519cc03f1b0745852b4c8b691d0a03199722ab64cdf53425665e20be1ec5",
+    "manifest": "30f0edb5a8238da237d80fb012c320c04b2b4ac78e68481089a647961cfc66c4",
+    "packageJson": "393552fb22b0e6b9bbd15ef79cb29ab70be32c531d3ee31f357d1bab751cdc55",
     "agents": "4ca8837df73cf8b966b65cea639a058baa8f92ae536f3cd5036546fcbfeb37c8"
   },
   "exports": [

package/dist/lib/smrt-products.css

@@ -84,24 +84,24 @@
     border-top: 1px solid var(--smrt-color-outline-variant, #f3f4f6);
   }
 
-  .product-form.svelte-1hh5ovx {
+  .product-form-shell.svelte-1hh5ovx .product-form {
     max-width: 500px;
     padding: 1.5rem;
     background: var(--smrt-color-surface, #fff);
     border-radius: var(--smrt-radius-md, 8px);
     border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
   }
-  
+
   .form-group.svelte-1hh5ovx {
     margin-bottom: 1rem;
   }
-  
+
   .form-row.svelte-1hh5ovx {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
   }
-  
+
   label.svelte-1hh5ovx {
     display: block;
     margin-bottom: 0.25rem;
@@ -110,30 +110,13 @@
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
   }
 
-  .form-input.svelte-1hh5ovx, .form-textarea.svelte-1hh5ovx {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-sm, 4px);
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    transition: border-color 0.2s;
-  }
-
-  .form-input.svelte-1hh5ovx:focus, .form-textarea.svelte-1hh5ovx:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #3b82f6);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #3b82f6) 10%, transparent);
-  }
-
-  .form-input.error.svelte-1hh5ovx {
+  /* Error border on the migrated <Input>. The primitive renders the inner
+     <input class="input error"> inside its own component, so the scoped class
+     can't reach it without :global (#1589). */
+  .product-form-shell.svelte-1hh5ovx .input.error {
     border-color: var(--smrt-color-error, #dc2626);
   }
-  
-  .form-textarea.svelte-1hh5ovx {
-    resize: vertical;
-    min-height: 80px;
-  }
-  
+
   .checkbox-label.svelte-1hh5ovx {
     display: flex;
     align-items: center;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@happyvertical/smrt-products",
-  "version": "0.34.6",
+  "version": "0.34.7",
   "description": "SMRT products module: triple-purpose microservice template for standalone apps, federated modules, and NPM libraries",
   "author": "HappyVertical",
   "type": "module",
-  "smrtRawPrimitives": "strict-buttons",
+  "smrtRawPrimitives": "strict",
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.ts",
   "files": [
@@ -55,11 +55,11 @@
     "@happyvertical/utils": "^0.74.7",
     "cors": "^2.8.5",
     "express": "^5.2.1",
-    "@happyvertical/smrt-assets": "0.34.6",
-    "@happyvertical/smrt-core": "0.34.6",
-    "@happyvertical/smrt-scanner": "0.34.6",
-    "@happyvertical/smrt-tenancy": "0.34.6",
-    "@happyvertical/smrt-ui": "0.34.6"
+    "@happyvertical/smrt-assets": "0.34.7",
+    "@happyvertical/smrt-core": "0.34.7",
+    "@happyvertical/smrt-scanner": "0.34.7",
+    "@happyvertical/smrt-tenancy": "0.34.7",
+    "@happyvertical/smrt-ui": "0.34.7"
   },
   "peerDependencies": {
     "svelte": "^5.46.4"
@@ -82,7 +82,7 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.17",
-    "@happyvertical/smrt-vitest": "0.34.6"
+    "@happyvertical/smrt-vitest": "0.34.7"
   },
   "keywords": [
     "smrt",