@happyvertical/smrt-products 0.34.5 → 0.34.7

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

@@ -1,5 +1,7 @@
 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>`);
@@ -7,8 +9,6 @@ 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>`);
-var root_7 = $.from_html(`<button type="button" class="edit-btn svelte-11ja2cl">Edit</button>`);
-var root_8 = $.from_html(`<button type="button" class="delete-btn svelte-11ja2cl">Delete</button>`);
 var root$1 = $.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>`);
 function ProductCard($$anchor, $$props) {
   $.push($$props, true);
@@ -94,9 +94,18 @@ function ProductCard($$anchor, $$props) {
   var node_5 = $.child(div_7);
   {
     var consequent_5 = ($$anchor2) => {
-      var button = root_7();
-      $.delegated("click", button, () => $$props.onEdit?.($$props.product));
-      $.append($$anchor2, button);
+      Button($$anchor2, {
+        type: "button",
+        variant: "secondary",
+        size: "sm",
+        onclick: () => $$props.onEdit?.($$props.product),
+        children: ($$anchor3, $$slotProps) => {
+          $.next();
+          var text_6 = $.text("Edit");
+          $.append($$anchor3, text_6);
+        },
+        $$slots: { default: true }
+      });
     };
     $.if(node_5, ($$render) => {
       if ($$props.onEdit) $$render(consequent_5);
@@ -105,9 +114,18 @@ function ProductCard($$anchor, $$props) {
   var node_6 = $.sibling(node_5, 2);
   {
     var consequent_6 = ($$anchor2) => {
-      var button_1 = root_8();
-      $.delegated("click", button_1, () => $$props.onDelete?.($$props.product.id));
-      $.append($$anchor2, button_1);
+      Button($$anchor2, {
+        type: "button",
+        variant: "danger",
+        size: "sm",
+        onclick: () => $$props.onDelete?.($$props.product.id),
+        children: ($$anchor3, $$slotProps) => {
+          $.next();
+          var text_7 = $.text("Delete");
+          $.append($$anchor3, text_7);
+        },
+        $$slots: { default: true }
+      });
     };
     $.if(node_6, ($$render) => {
       if ($$props.onDelete) $$render(consequent_6);
@@ -119,7 +137,6 @@ function ProductCard($$anchor, $$props) {
   $.append($$anchor, div);
   $.pop();
 }
-$.delegate(["click"]);
 const M = defineMessages({
   // App
   "products.app.categories_coming_soon": "Category management coming soon...",
@@ -208,10 +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_3 = $.from_html(`<button type="button" class="cancel-btn svelte-1hh5ovx">Cancel</button>`);
-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"><!> <button type="submit" class="submit-btn svelte-1hh5ovx"><!></button></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();
@@ -251,147 +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) => {
-      var button = root_3();
-      $.template_effect(() => button.disabled = loading());
-      $.delegated("click", button, function(...$$args) {
-        $$props.onCancel?.apply(this, $$args);
+  var div = root();
+  var node = $.child(div);
+  Form(node, {
+    onsubmit: handleSubmit,
+    class: "product-form",
+    children: ($$anchor2, $$slotProps) => {
+      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);
+      {
+        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);
+        };
+        $.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_8, ($$render) => {
+          if ($$props.onCancel) $$render(consequent_2);
+        });
+      }
+      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 }
       });
-      $.append($$anchor2, button);
-    };
-    $.if(node_2, ($$render) => {
-      if ($$props.onCancel) $$render(consequent_2);
-    });
-  }
-  var button_1 = $.sibling(node_2, 2);
-  var node_3 = $.child(button_1);
-  {
-    var consequent_3 = ($$anchor2) => {
-      var text_5 = $.text("Saving...");
-      $.append($$anchor2, text_5);
-    };
-    var alternate = ($$anchor2) => {
-      var text_6 = $.text();
-      $.template_effect(() => $.set_text(text_6, product().id ? "Update Product" : "Create Product"));
-      $.append($$anchor2, text_6);
-    };
-    $.if(node_3, ($$render) => {
-      if (loading()) $$render(consequent_3);
-      else $$render(alternate, -1);
-    });
-  }
-  $.reset(button_1);
-  $.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 ?? ""}`);
-      button_1.disabled = loading();
+      $.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);
     },
-    [
-      () => 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);
+    $$slots: { default: true }
+  });
+  $.reset(div);
+  $.append($$anchor, div);
   $.pop();
 }
-$.delegate(["click"]);
 export {
   ProductCard as P,
   ProductForm as a
 };
-//# sourceMappingURL=ProductForm-p4-xbubZ.js.map
+//# sourceMappingURL=ProductForm-BLRguem5.js.map

package/dist/lib/chunks/ProductForm-BLRguem5.js.map

@@ -0,0 +1 @@
+{"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":";;;;;;;;;;;;wCAAA;;MAaC,MAAGA,OAAA;AACD,MAAA,gBADF,GAAG;AAEC,MAAA,aADF,KAAG;qBACD,IAAE,IAAA;UAAF,EAAE;uBAAF,IAAE,CAAA;;;UAEA,QAAGC,SAAA;2BAAH,OAAG,IAAA;cAAH,KAAG;iEAAuC,YAAY,CAAA;0BAAtD,KAAG;AAAA;;0BADO,aAAY,UAAA,UAAA;AAAA;;UAF1B,KAAG;yBAAH,OAAG,CAAA;;;UAQD,QAAGC,SAAA;2BAAH,KAAG;cAAH,KAAG;2EAAuC,SAAK,EAAA,EAAA,CAAA;0BAA/C,KAAG;AAAA;;0BADO,MAAK,UAAA,YAAA;AAAA;;;;;UAKf,IAACC,SAAA;2BAAD,GAAC,IAAA;cAAD,CAAC;iEAAsC,WAAW,CAAA;0BAAlD,CAAC;AAAA;;0BADS,YAAW,UAAA,YAAA;AAAA;;MAIvB,QAAG,EAAA,QAAA,QAAA,CAAA;uBAAH,KAAG;;;UAEC,QAAG,OAAA;2BAAH,KAAG;cAAH,KAAG;8EAA6C,YAAQ,EAAA,EAAA,CAAA;0BAAxD,KAAG;AAAA;;0BADO,SAAQ,UAAA,YAAA;AAAA;;;;;UAKlB,QAAG,OAAA;aAAH,OAAG,IAAA,MAAA,QAAA,QACa,MAAI,EAAA,OAAA,CAAAC,WAAI,QAAG;YACvB,OAAI,OAAA;6BAAJ,MAAI,IAAA;gBAAJ,IAAI;yDAAc,GAAG,CAAA,CAAA;4BAArB,IAAI;AAAA;cAFR,KAAG;0BAAH,KAAG;AAAA;;AADO,UAAA,QAAA,QAAA,QAAI,QAAA,QAAY,KAAK,SAAS,EAAC,UAAA,YAAA;AAAA;;UAL7C,KAAG;AAcH,MAAA,kBAdA,OAAG,CAAA;uBAcH,KAAG;;;AAEC,aAAMA,WAAA;AAAA;;;;;;;;;;;;;;;;;;;AAMN,aAAMA,WAAA;AAAA;;;0DAA4E,EAAE;AAAA;;;;;;;;;;;;UARxF,KAAG;UA9BL,GAAG;2DAEkC,IAAI,CAAA;qBAFzC,GAAG;;AAFI;ACTD,MAAM,IAAI,eAAe;AAAA;AAAA,EAE9B,uCAAuC;AAAA,EACvC,sCAAsC;AAAA;AAAA,EAGtC,qCAAqC;AAAA,EACrC,wCACE;AAAA,EACF,gCAAgC;AAAA,EAChC,iCAAiC;AAAA;AAAA,EAGjC,4BAA4B;AAAA,EAC5B,+BACE;AAAA,EACF,4CAA4C;AAAA,EAC5C,6CACE;AAAA,EACF,iDACE;AAAA,EACF,6CAA6C;AAAA,EAC7C,sCAAsC;AAAA,EACtC,gDAAgD;AAAA,EAChD,gDACE;AAAA,EACF,oDACE;AAAA,EACF,0CAA0C;AAAA,EAC1C,6CAA6C;AAAA,EAC7C,0CAA0C;AAAA,EAC1C,8CACE;AAAA,EACF,0CAA0C;AAAA,EAC1C,yCAAyC;AAAA,EACzC,wCAAwC;AAAA,EACxC,0CAA0C;AAAA,EAC1C,8CAA8C;AAAA,EAC9C,0CAA0C;AAAA,EAC1C,iDACE;AAAA,EACF,oDACE;AAAA,EACF,6CAA6C;AAAA,EAC7C,uCAAuC;AAAA,EACvC,gDAAgD;AAAA,EAChD,+CACE;AAAA,EACF,kDAAkD;AAAA,EAClD,iDACE;AAAA,EACF,gDAAgD;AAAA,EAChD,+CACE;AAAA,EACF,gDAAgD;AAAA,EAChD,+CACE;AAAA,EACF,yDACE;AAAA,EACF,wDACE;AAAA;AAAA,EAGF,sCACE;AAAA,EACF,8CACE;AAAA,EACF,2CAA2C;AAAA,EAC3C,wCACE;AAAA,EACF,2CACE;AAAA,EACF,uCACE;AAAA;AAAA,EAGF,oCAAoC;AAAA,EACpC,0CAA0C;AAAA,EAC1C,iDACE;AAAA,EACF,8CAA8C;AAAA,EAC9C,0CAA0C;AAAA,EAC1C,mCAAmC;AAAA,EACnC,wCAAwC;AAAA;AAAA,EAGxC,iCAAiC;AAAA;AAAA,EAGjC,+BAA+B;AAAA,EAC/B,oCAAoC;AAAA;AAAA,EAGpC,sCAAsC;AAAA,EACtC,uCAAuC;AAAA;AAAA,EAGvC,mCAAmC;AAAA,EACnC,sCAAsC;AAAA,EACtC,yCACE;AAAA,EACF,0CAA0C;AAAA,EAC1C,yCAAyC;AAAA,EACzC,gDAAgD;AAAA,EAChD,gDAAgD;AAAA,EAChD,uCAAuC;AAAA;AAAA,EAGvC,kCAAkC;AAAA,EAClC,qCAAqC;AAAA,EACrC,wCAAwC;AAAA,EACxC,+CAA+C;AAAA,EAC/C,2CAA2C;AAAA,EAC3C,wCAAwC;AAAA,EACxC,oCAAoC;AAAA,EACpC,kCACE;AAAA,EACF,yCAAyC;AAAA,EACzC,qCACE;AACJ,CAAC;;;;;wCC1HD;;AAOQ,QAAA,EAAA,EAAC,IAAK,QAAO;QASb,UAAO,EAAA,KAAA,SAAA,WAAA,IAAA,OAAA,CAAA,EAAA,GAA2B,wCAAU,KAAK;QAEnD,WAAQ,EAAA,MAAA;AAAA,IACZ,MAAM,UAAQ,QAAQ;AAAA,IACtB,aAAa,UAAQ,eAAe;AAAA,IACpC,OAAO,UAAQ,SAAS;AAAA,IACxB,SAAS,UAAQ,WAAW;AAAA,IAC5B,UAAU,UAAQ,YAAY;AAAA,IAC9B,MAAM,QAAO,EAAC,MAAM,KAAK,IAAI,KAAK;AAAA;AAGhC,MAAA,SAAS,EAAA,MAAM,EAAA,MAAA,CAAA,CAAA,CAAA;AAEV,WAAA,eAAe;UACtB,QAAM,CAAA,GAAA,IAAA;AAED,QAAA,CAAA,SAAS,KAAK,QAAQ;YACzB,MAAM,EAAC,OAAO;AAAA,IAChB;AAEI,QAAA,SAAS,QAAQ,GAAG;YACtB,MAAM,EAAC,QAAQ;AAAA,IACjB;AAEO,WAAA,OAAO,KAAI,EAAA,IAAC,MAAM,CAAA,EAAE,WAAW;AAAA,EACxC;WAES,aAAa,OAAc;AAClC,UAAM,eAAc;AAEf,QAAA,CAAA,aAAY,GAAI;;IAErB;UAEM,cAAiC;AAAA,SAClC,QAAO;AAAA,MACV,MAAM,SAAS,KAAK,KAAI;AAAA,MACxB,aAAa,SAAS,YAAY,KAAI,KAAM;AAAA,MAC5C,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB,UAAU,SAAS,SAAS,KAAI;AAAA,MAChC,MAAM,SAAS,OACX,SAAS,KACN,MAAM,GAAG,EACT,IAAG,CAAE,QAAQ,IAAI,MAAI,EACrB,OAAO,OAAO;;qBAId,WAAW;AAAA,EACtB;MAGC,MAAG,KAAA;qBAAH,GAAG;AACD,OAAI,MAAA;AAAA,cAAW;AAAA;;;UACb,QAAG,EAAA,YAAA,QAAA;AACD,UAAA,gBADF,KAAG;yBACD,OAAK,IAAA;cAAL,KAAK;6BAAL,OAAK,CAAA;;AAMG,YAAA,KAAA,EAAA,QAAA,MAAA,EAAA,IAAA,MAAM,EAAC,OAAO,UAAU,EAAE;iCACpB,EAAE,EAAE,wCAAwC,CAAA,CAAA;AAN1D,cAAI,QAAA;AAAA;;;mBAIO,QAAO;AAAA;;;;;;;cADjB,QAAU;AAAE,mBAAA,SAAS;AAAA;cAArB,MAAU,SAAA;AAAE,qBAAS,OAAI;AAAA;;;;;;cAMxB,OAAI,OAAA;+BAAJ,MAAI,IAAA;kBAAJ,IAAI;AAAwB,YAAA,gBAAA,MAAA,EAAA,SAAA,QAAA,EAAA,IAAA,MAAM,EAAC,IAAI,CAAA;8BAAvC,IAAI;AAAA;;AADF,cAAA,EAAA,IAAA,MAAM,EAAC,KAAI,UAAA,UAAA;AAAA;;cAVjB,KAAG;AAeH,UAAA,kBAfA,OAAG,CAAA;qCAeH,KAAG,GAAA,CAAA;;iCAMa,EAAE,EAAE,+CAA+C,CAAA,CAAA;AAJjE,iBAAO,QAAA;AAAA;;mBAGI,QAAO;AAAA;;;;gBAEX;AAAA,cAHN,QAAU;AAAE,mBAAA,SAAS;AAAA;cAArB,MAAU,SAAA;AAAE,qBAAS,cAAW;AAAA;;;cAJnC,KAAG;AAWH,UAAA,kBAXA,OAAG,CAAA;AAYD,UAAA,gBADF,KAAG;qCACD,KAAG,GAAA,CAAA;;AASO,YAAA,KAAA,EAAA,QAAA,MAAA,EAAA,IAAA,MAAM,EAAC,QAAQ,UAAU,EAAE;AAPnC,cAAI,QAAA;AAAA;;;;;mBAMO,QAAO;AAAA;;;;;cADjB,QAAU;AAAE,mBAAA,SAAS;AAAA;cAArB,MAAU,SAAA;AAAE,qBAAS,QAAK;AAAA;;;;;;cAMzB,SAAI,OAAA;+BAAJ,QAAI,IAAA;kBAAJ,MAAI;AAAwB,YAAA,gBAAA,MAAA,EAAA,SAAA,QAAA,EAAA,IAAA,MAAM,EAAC,KAAK,CAAA;8BAAxC,MAAI;AAAA;;AADF,cAAA,EAAA,IAAA,MAAM,EAAC,MAAK,UAAA,YAAA;AAAA;;cAZlB,KAAG;AAiBH,UAAA,kBAjBA,OAAG,CAAA;qCAiBH,KAAG,GAAA,CAAA;;iCAOa,EAAE,EAAE,4CAA4C,CAAA,CAAA;AAL9D,cAAI,QAAA;AAAA;;;mBAIO,QAAO;AAAA;;;;cADjB,QAAU;AAAE,mBAAA,SAAS;AAAA;cAArB,MAAU,SAAA;AAAE,qBAAS,WAAQ;AAAA;;;cALhC,KAAG;cAlBL,KAAG;AA8BH,UAAA,kBA9BA,OAAG,CAAA;qCA8BH,KAAG,GAAA,CAAA;;iCAOa,EAAE,EAAE,wCAAwC,CAAA,CAAA;AAL1D,cAAI,QAAA;AAAA;;;mBAIO,QAAO;AAAA;;;;cADjB,QAAU;AAAE,mBAAA,SAAS;AAAA;cAArB,MAAU,SAAA;AAAE,qBAAS,OAAI;AAAA;;;UAI1B,QAAK,EAAA,QAAA,QAAA,CAAA;2BAAL,OAAK,IAAA;cAAL,KAAK;cATP,KAAG;AAYH,UAAA,kBAZA,OAAG,CAAA;AAaD,UAAA,kBADF,KAAG;AAGC,UAAA,gBAFF,OAAK;8BAEH,KAAI;6BAAJ,KAAI;cAFN,OAAK;cADP,KAAG;AAaH,UAAA,kBAbA,OAAG,CAAA;2BAaH,KAAG;;;AAEC,iBAAMA,WAAA;AAAA;;;;;;qBAAgE,QAAO;AAAA;;;;;;;;;;;;;;AAK/E,aAAM,QAAA;AAAA;;;iBAA2C,QAAO;AAAA;;;;;;;;;;;AAIpD,gBAAA,gBAAA,MAAA,EAAA,SAAA,QAAA,QAAO,EAAC,KAAK,mBAAmB,gBAAgB,CAAA;;;;kBAH9C,QAAO,EAAA,UAAA,YAAA;AAAA,kBAAA,UAAA,WAAA,EAAA;AAAA;;;;;;cARf,KAAG;;;;;AAVC,2BAGW,QAAO;;;;gBAzEF,EAAE,EAAE,kCAAkC,CAAA;AAAA,gBAgE/B,EAAE,EAAE,iCAAiC,CAAA;AAAA,gBAY5D,EAAE,EAAE,sCAAsC,CAAA;AAAA;;AAN1C,QAAA,aAAA,aAEe,SAAS,SAAO,CAAA,YAAhB,SAAS,UAAO,OAAA;;;;;UA3EvC,GAAG;qBAAH,GAAG;;AAFI;"}

package/dist/lib/components.js

@@ -1,4 +1,4 @@
-import { P, a } from "./chunks/ProductForm-p4-xbubZ.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-p4-xbubZ.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/ProductCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { ProductData } from '../types';
 
 interface Props {
@@ -42,15 +43,15 @@ const { product, onEdit, onDelete }: Props = $props();
   
   <div class="product-actions">
     {#if onEdit}
-      <button type="button" onclick={() => onEdit?.(product)} class="edit-btn">
+      <Button type="button" variant="secondary" size="sm" onclick={() => onEdit?.(product)}>
         Edit
-      </button>
+      </Button>
     {/if}
-    
+
     {#if onDelete}
-      <button type="button" onclick={() => onDelete?.(product.id)} class="delete-btn">
+      <Button type="button" variant="danger" size="sm" onclick={() => onDelete?.(product.id)}>
         Delete
-      </button>
+      </Button>
     {/if}
   </div>
 </div>
@@ -140,34 +141,4 @@ const { product, onEdit, onDelete }: Props = $props();
     padding-top: 0.75rem;
     border-top: 1px solid var(--smrt-color-outline-variant, #f3f4f6);
   }
-  
-  .edit-btn, .delete-btn {
-    padding: 0.375rem 0.75rem;
-    border-radius: var(--smrt-radius-sm, 4px);
-    font-size: var(--smrt-typography-label-large-size, 0.875rem);
-    font-weight: var(--smrt-typography-weight-medium, 500);
-    border: 1px solid;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-  
-  .edit-btn {
-    background: var(--smrt-color-surface-container-low, #f9fafb);
-    border-color: var(--smrt-color-outline-variant, #d1d5db);
-    color: var(--smrt-color-on-surface, #374151);
-  }
-
-  .edit-btn:hover {
-    background: var(--smrt-color-surface-container, #f3f4f6);
-  }
-
-  .delete-btn {
-    background: var(--smrt-color-error-container, #fef2f2);
-    border-color: var(--smrt-color-error, #fecaca);
-    color: var(--smrt-color-error, #dc2626);
-  }
-
-  .delete-btn:hover {
-    background: var(--smrt-color-error-container, #fee2e2);
-  }
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/ProductCard.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAwDD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProductCard.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/ProductCard.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAyDD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}