@jasonshimmy/custom-elements-runtime 1.2.3 → 2.0.0

package/dist/custom-elements-runtime.directive-enhancements.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./custom-elements-runtime.directives.cjs.js");function g(n,e){return c.when(!n,e)}function m(n,e){const r=!n||n.length===0;return c.when(r,e)}function k(n,e){const r=!!(n&&n.length>0);return c.when(r,e)}function y(n,e,r){const t=[];return n.forEach((o,i)=>{e(o,i)&&t.push({item:o,originalIndex:i})}),t.map(({item:o,originalIndex:i},a)=>{const l=typeof o=="object"&&o!=null?o?.key??o?.id??`filtered-${i}`:`filtered-${i}`;return c.anchorBlock(r(o,i,a),`each-where-${l}`)})}function B(n,e){const r=n?.length??0;return r===0&&e.empty?c.anchorBlock(e.empty,"switch-length-empty"):r===1&&e.one?c.anchorBlock(e.one(n[0]),"switch-length-one"):e.exactly?.[r]?c.anchorBlock(e.exactly[r](n),`switch-length-${r}`):r>1&&e.many?c.anchorBlock(e.many(n),"switch-length-many"):c.anchorBlock([],"switch-length-fallback")}function x(n,e,r){const t=new Map;return n.forEach(o=>{const i=e(o);t.has(i)||t.set(i,[]),t.get(i).push(o)}),Array.from(t.entries()).map(([o,i],a)=>c.anchorBlock(r(o,i,a),`each-group-${o}`))}function v(n,e,r,t){const o=r*e,i=Math.min(o+e,n.length);return n.slice(o,i).map((l,p)=>{const u=o+p,w=typeof l=="object"&&l!=null?l?.key??l?.id??`page-${u}`:`page-${u}`;return c.anchorBlock(t(l,u,p),`each-page-${w}`)})}function b(n,e){return n.loading&&e.loading?c.anchorBlock(e.loading,"promise-loading"):n.error&&e.error?c.anchorBlock(e.error(n.error),"promise-error"):n.data!==void 0&&e.success?c.anchorBlock(e.success(n.data),"promise-success"):e.idle?c.anchorBlock(e.idle,"promise-idle"):c.anchorBlock([],"promise-fallback")}function h(n,e){const r=typeof window<"u"&&window.matchMedia?.(n)?.matches;return c.when(!!r,e)}const s={sm:"(min-width:640px)",md:"(min-width:768px)",lg:"(min-width:1024px)",xl:"(min-width:1280px)","2xl":"(min-width:1536px)",dark:"(prefers-color-scheme: dark)"},d=["sm","md","lg","xl","2xl"],f={sm:n=>h(s.sm,n),md:n=>h(s.md,n),lg:n=>h(s.lg,n),xl:n=>h(s.xl,n),"2xl":n=>h(s["2xl"],n),dark:n=>h(s.dark,n),light:n=>h("(prefers-color-scheme: light)",n),touch:n=>h("(hover: none) and (pointer: coarse)",n),mouse:n=>h("(hover: hover) and (pointer: fine)",n),reducedMotion:n=>h("(prefers-reduced-motion: reduce)",n),highContrast:n=>h("(prefers-contrast: high)",n),portrait:n=>h("(orientation: portrait)",n),landscape:n=>h("(orientation: landscape)",n)};function O(n,e){const r=[];n.includes("dark")?r.push(s.dark):n.includes("light")&&r.push("(prefers-color-scheme: light)");const t=n.filter(a=>d.includes(a)),o=t[t.length-1];o&&o in s&&r.push(s[o]);const i=r.length>0?r.join(" and "):"all";return h(i,e)}function $(n){const e=[];return n.base&&e.push(c.anchorBlock(n.base,"responsive-base")),d.forEach(r=>{const t=n[r];t&&e.push(f[r](t))}),e}function E(n){const e=[];let r=null;return{case(t,o){const i=typeof t=="function"?t:a=>a===t;return e.push({condition:i,content:o}),this},when(t,o){return e.push({condition:t,content:o}),this},otherwise(t){return r=t,this},done(){for(let t=0;t<e.length;t++){const{condition:o,content:i}=e[t];if(o(n))return c.anchorBlock(i,`switch-case-${t}`)}return c.anchorBlock(r||[],"switch-otherwise")}}}exports.eachGroup=x;exports.eachPage=v;exports.eachWhere=y;exports.mediaVariants=s;exports.responsive=f;exports.responsiveOrder=d;exports.responsiveSwitch=$;exports.switchOn=E;exports.switchOnLength=B;exports.switchOnPromise=b;exports.unless=g;exports.whenEmpty=m;exports.whenMedia=h;exports.whenNotEmpty=k;exports.whenVariants=O;
+//# sourceMappingURL=custom-elements-runtime.directive-enhancements.cjs.js.map

package/dist/custom-elements-runtime.directive-enhancements.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-elements-runtime.directive-enhancements.cjs.js","sources":["../src/lib/directive-enhancements.ts"],"sourcesContent":["// Enhanced collection directives for better developer experience\n\nimport type { VNode } from './runtime/types';\nimport { when, anchorBlock } from './directives';\n\n/**\n * Conditional rendering with negated condition (opposite of when)\n * @param cond - Boolean condition to negate\n * @param children - Content to render when condition is false\n */\nexport function unless(cond: boolean, children: VNode | VNode[]): VNode {\n  return when(!cond, children);\n}\n\n/**\n * Render content only if array/collection is empty\n * @param collection - Array or collection to check\n * @param children - Content to render when empty\n */\nexport function whenEmpty<T>(\n  collection: T[] | null | undefined,\n  children: VNode | VNode[],\n): VNode {\n  const isEmpty = !collection || collection.length === 0;\n  return when(isEmpty, children);\n}\n\n/**\n * Render content only if array/collection has items\n * @param collection - Array or collection to check\n * @param children - Content to render when not empty\n */\nexport function whenNotEmpty<T>(\n  collection: T[] | null | undefined,\n  children: VNode | VNode[],\n): VNode {\n  const hasItems = Boolean(collection && collection.length > 0);\n  return when(hasItems, children);\n}\n\n/**\n * Enhanced each with filtering capability\n * @param list - Array to iterate over\n * @param predicate - Filter function (optional)\n * @param render - Render function for each item\n */\nexport function eachWhere<T>(\n  list: T[],\n  predicate: (item: T, index: number) => boolean,\n  render: (item: T, index: number, filteredIndex: number) => VNode | VNode[],\n): VNode[] {\n  const filtered: Array<{ item: T; originalIndex: number }> = [];\n\n  list.forEach((item, index) => {\n    if (predicate(item, index)) {\n      filtered.push({ item, originalIndex: index });\n    }\n  });\n\n  return filtered.map(({ item, originalIndex }, filteredIndex) => {\n    const itemKey =\n      typeof item === 'object' && item != null\n        ? ((item as Record<string, unknown>)?.key ??\n          (item as Record<string, unknown>)?.id ??\n          `filtered-${originalIndex}`)\n        : `filtered-${originalIndex}`;\n\n    return anchorBlock(\n      render(item, originalIndex, filteredIndex),\n      `each-where-${itemKey}`,\n    );\n  });\n}\n\n/**\n * Render different content based on array length\n * @param list - Array to check\n * @param cases - Object with length-based cases\n */\nexport function switchOnLength<T>(\n  list: T[],\n  cases: {\n    empty?: VNode | VNode[];\n    one?: (item: T) => VNode | VNode[];\n    many?: (items: T[]) => VNode | VNode[];\n    exactly?: { [count: number]: (items: T[]) => VNode | VNode[] };\n  },\n): VNode {\n  const length = list?.length ?? 0;\n\n  if (length === 0 && cases.empty) {\n    return anchorBlock(cases.empty, 'switch-length-empty');\n  }\n\n  if (length === 1 && cases.one) {\n    return anchorBlock(cases.one(list[0]), 'switch-length-one');\n  }\n\n  if (cases.exactly?.[length]) {\n    return anchorBlock(cases.exactly[length](list), `switch-length-${length}`);\n  }\n\n  if (length > 1 && cases.many) {\n    return anchorBlock(cases.many(list), 'switch-length-many');\n  }\n\n  return anchorBlock([], 'switch-length-fallback');\n}\n\n/**\n * Group array items and render each group\n * @param list - Array to group\n * @param groupBy - Function to determine group key\n * @param renderGroup - Function to render each group\n */\nexport function eachGroup<T, K extends string | number>(\n  list: T[],\n  groupBy: (item: T) => K,\n  renderGroup: (groupKey: K, items: T[], groupIndex: number) => VNode | VNode[],\n): VNode[] {\n  const groups = new Map<K, T[]>();\n\n  list.forEach((item) => {\n    const key = groupBy(item);\n    if (!groups.has(key)) {\n      groups.set(key, []);\n    }\n    groups.get(key)!.push(item);\n  });\n\n  return Array.from(groups.entries()).map(([groupKey, items], groupIndex) => {\n    return anchorBlock(\n      renderGroup(groupKey, items, groupIndex),\n      `each-group-${groupKey}`,\n    );\n  });\n}\n\n/**\n * Render with pagination/chunking\n * @param list - Array to chunk\n * @param pageSize - Items per page/chunk\n * @param currentPage - Current page (0-based)\n * @param render - Render function for visible items\n */\nexport function eachPage<T>(\n  list: T[],\n  pageSize: number,\n  currentPage: number,\n  render: (item: T, index: number, pageIndex: number) => VNode | VNode[],\n): VNode[] {\n  const startIndex = currentPage * pageSize;\n  const endIndex = Math.min(startIndex + pageSize, list.length);\n  const pageItems = list.slice(startIndex, endIndex);\n\n  return pageItems.map((item, pageIndex) => {\n    const globalIndex = startIndex + pageIndex;\n    const itemKey =\n      typeof item === 'object' && item != null\n        ? ((item as Record<string, unknown>)?.key ??\n          (item as Record<string, unknown>)?.id ??\n          `page-${globalIndex}`)\n        : `page-${globalIndex}`;\n\n    return anchorBlock(\n      render(item, globalIndex, pageIndex),\n      `each-page-${itemKey}`,\n    );\n  });\n}\n\n/* --- Async & Loading State Directives --- */\n\n/**\n * Render content based on Promise state\n * @param promiseState - Object with loading, data, error states\n * @param cases - Render functions for each state\n */\nexport function switchOnPromise<T, E = Error>(\n  promiseState: {\n    loading?: boolean;\n    data?: T;\n    error?: E;\n  },\n  cases: {\n    loading?: VNode | VNode[];\n    success?: (data: T) => VNode | VNode[];\n    error?: (error: E) => VNode | VNode[];\n    idle?: VNode | VNode[];\n  },\n): VNode {\n  if (promiseState.loading && cases.loading) {\n    return anchorBlock(cases.loading, 'promise-loading');\n  }\n\n  if (promiseState.error && cases.error) {\n    return anchorBlock(cases.error(promiseState.error), 'promise-error');\n  }\n\n  if (promiseState.data !== undefined && cases.success) {\n    return anchorBlock(cases.success(promiseState.data), 'promise-success');\n  }\n\n  if (cases.idle) {\n    return anchorBlock(cases.idle, 'promise-idle');\n  }\n\n  return anchorBlock([], 'promise-fallback');\n}\n\n/* --- Utility Directives --- */\n\n/**\n * Render content based on screen size/media query\n * @param mediaQuery - CSS media query string\n * @param children - Content to render when media query matches\n */\nexport function whenMedia(\n  mediaQuery: string,\n  children: VNode | VNode[],\n): VNode {\n  const matches =\n    typeof window !== 'undefined' && window.matchMedia?.(mediaQuery)?.matches;\n  return when(Boolean(matches), children);\n}\n\n/* --- Responsive & Media Query Directives (aligned with style.ts) --- */\n\n/**\n * Media variants matching those in style.ts\n */\nexport const mediaVariants = {\n  // Responsive breakpoints (matching style.ts)\n  sm: '(min-width:640px)',\n  md: '(min-width:768px)',\n  lg: '(min-width:1024px)',\n  xl: '(min-width:1280px)',\n  '2xl': '(min-width:1536px)',\n\n  // Dark mode (matching style.ts)\n  dark: '(prefers-color-scheme: dark)',\n} as const;\n\n/**\n * Responsive order matching style.ts\n */\nexport const responsiveOrder = ['sm', 'md', 'lg', 'xl', '2xl'] as const;\n\n/**\n * Individual responsive directives matching the style.ts breakpoint system\n */\nexport const responsive = {\n  // Breakpoint-based rendering (matching style.ts exactly)\n  sm: (children: VNode | VNode[]) => whenMedia(mediaVariants.sm, children),\n  md: (children: VNode | VNode[]) => whenMedia(mediaVariants.md, children),\n  lg: (children: VNode | VNode[]) => whenMedia(mediaVariants.lg, children),\n  xl: (children: VNode | VNode[]) => whenMedia(mediaVariants.xl, children),\n  '2xl': (children: VNode | VNode[]) =>\n    whenMedia(mediaVariants['2xl'], children),\n\n  // Dark mode (matching style.ts)\n  dark: (children: VNode | VNode[]) => whenMedia(mediaVariants.dark, children),\n  light: (children: VNode | VNode[]) =>\n    whenMedia('(prefers-color-scheme: light)', children),\n\n  // Accessibility and interaction preferences\n  touch: (children: VNode | VNode[]) =>\n    whenMedia('(hover: none) and (pointer: coarse)', children),\n  mouse: (children: VNode | VNode[]) =>\n    whenMedia('(hover: hover) and (pointer: fine)', children),\n  reducedMotion: (children: VNode | VNode[]) =>\n    whenMedia('(prefers-reduced-motion: reduce)', children),\n  highContrast: (children: VNode | VNode[]) =>\n    whenMedia('(prefers-contrast: high)', children),\n\n  // Orientation\n  portrait: (children: VNode | VNode[]) =>\n    whenMedia('(orientation: portrait)', children),\n  landscape: (children: VNode | VNode[]) =>\n    whenMedia('(orientation: landscape)', children),\n} as const;\n\n/**\n * Advanced responsive directive that matches the style.ts multi-variant processing\n * Allows chaining responsive and dark mode conditions like in CSS classes\n * @param variants - Array of variant keys (e.g., ['dark', 'lg'])\n * @param children - Content to render when all variants match\n */\nexport function whenVariants(\n  variants: Array<keyof typeof mediaVariants | 'light'>,\n  children: VNode | VNode[],\n): VNode {\n  const conditions: string[] = [];\n\n  // Process dark/light mode\n  if (variants.includes('dark')) {\n    conditions.push(mediaVariants.dark);\n  } else if (variants.includes('light')) {\n    conditions.push('(prefers-color-scheme: light)');\n  }\n\n  // Process responsive variants (take the last one, matching style.ts behavior)\n  const responsiveVariants = variants.filter((v) =>\n    responsiveOrder.includes(v as (typeof responsiveOrder)[number]),\n  );\n  const lastResponsive = responsiveVariants[responsiveVariants.length - 1];\n  if (lastResponsive && lastResponsive in mediaVariants) {\n    conditions.push(\n      mediaVariants[lastResponsive as keyof typeof mediaVariants],\n    );\n  }\n\n  const mediaQuery = conditions.length > 0 ? conditions.join(' and ') : 'all';\n  return whenMedia(mediaQuery, children);\n}\n\n/**\n * Responsive switch directive - render different content for different breakpoints\n * Mirrors the responsive behavior from the style system\n * @param content - Object with breakpoint keys and corresponding content\n */\nexport function responsiveSwitch(content: {\n  base?: VNode | VNode[];\n  sm?: VNode | VNode[];\n  md?: VNode | VNode[];\n  lg?: VNode | VNode[];\n  xl?: VNode | VNode[];\n  '2xl'?: VNode | VNode[];\n}): VNode[] {\n  const results: VNode[] = [];\n\n  // Handle light mode variants\n  if (content.base) {\n    // Base content (no media query)\n    results.push(anchorBlock(content.base, 'responsive-base'));\n  }\n\n  // Add responsive variants in order\n  responsiveOrder.forEach((breakpoint) => {\n    const breakpointContent = content[breakpoint];\n    if (breakpointContent) {\n      results.push(responsive[breakpoint](breakpointContent));\n    }\n  });\n\n  return results;\n}\n\n/* --- Enhanced Match Directive --- */\n\n/**\n * Enhanced match directive with more fluent API\n * @param value - Value to match against\n */\nexport function switchOn<T>(value: T) {\n  const branches: Array<{\n    condition: (val: T) => boolean;\n    content: VNode | VNode[];\n  }> = [];\n  let otherwiseContent: VNode | VNode[] | null = null;\n\n  return {\n    case(matcher: T | ((val: T) => boolean), content: VNode | VNode[]) {\n      const condition =\n        typeof matcher === 'function'\n          ? (matcher as (val: T) => boolean)\n          : (val: T) => val === matcher;\n\n      branches.push({ condition, content });\n      return this;\n    },\n\n    when(predicate: (val: T) => boolean, content: VNode | VNode[]) {\n      branches.push({ condition: predicate, content });\n      return this;\n    },\n\n    otherwise(content: VNode | VNode[]) {\n      otherwiseContent = content;\n      return this;\n    },\n\n    done() {\n      for (let i = 0; i < branches.length; i++) {\n        const { condition, content } = branches[i];\n        if (condition(value)) {\n          return anchorBlock(content, `switch-case-${i}`);\n        }\n      }\n      return anchorBlock(otherwiseContent || [], 'switch-otherwise');\n    },\n  };\n}\n"],"names":["unless","cond","children","when","whenEmpty","collection","isEmpty","whenNotEmpty","hasItems","eachWhere","list","predicate","render","filtered","item","index","originalIndex","filteredIndex","itemKey","anchorBlock","switchOnLength","cases","length","eachGroup","groupBy","renderGroup","groups","key","groupKey","items","groupIndex","eachPage","pageSize","currentPage","startIndex","endIndex","pageIndex","globalIndex","switchOnPromise","promiseState","whenMedia","mediaQuery","matches","mediaVariants","responsiveOrder","responsive","whenVariants","variants","conditions","responsiveVariants","v","lastResponsive","responsiveSwitch","content","results","breakpoint","breakpointContent","switchOn","value","branches","otherwiseContent","matcher","condition","val","i"],"mappings":"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"}

package/dist/custom-elements-runtime.directive-enhancements.es.js

@@ -0,0 +1,144 @@
+import { when as a, anchorBlock as s } from "./custom-elements-runtime.directives.es.js";
+function y(n, e) {
+  return a(!n, e);
+}
+function x(n, e) {
+  const t = !n || n.length === 0;
+  return a(t, e);
+}
+function k(n, e) {
+  const t = !!(n && n.length > 0);
+  return a(t, e);
+}
+function b(n, e, t) {
+  const r = [];
+  return n.forEach((o, i) => {
+    e(o, i) && r.push({ item: o, originalIndex: i });
+  }), r.map(({ item: o, originalIndex: i }, u) => {
+    const l = typeof o == "object" && o != null ? o?.key ?? o?.id ?? `filtered-${i}` : `filtered-${i}`;
+    return s(
+      t(o, i, u),
+      `each-where-${l}`
+    );
+  });
+}
+function $(n, e) {
+  const t = n?.length ?? 0;
+  return t === 0 && e.empty ? s(e.empty, "switch-length-empty") : t === 1 && e.one ? s(e.one(n[0]), "switch-length-one") : e.exactly?.[t] ? s(e.exactly[t](n), `switch-length-${t}`) : t > 1 && e.many ? s(e.many(n), "switch-length-many") : s([], "switch-length-fallback");
+}
+function v(n, e, t) {
+  const r = /* @__PURE__ */ new Map();
+  return n.forEach((o) => {
+    const i = e(o);
+    r.has(i) || r.set(i, []), r.get(i).push(o);
+  }), Array.from(r.entries()).map(([o, i], u) => s(
+    t(o, i, u),
+    `each-group-${o}`
+  ));
+}
+function E(n, e, t, r) {
+  const o = t * e, i = Math.min(o + e, n.length);
+  return n.slice(o, i).map((l, p) => {
+    const d = o + p, g = typeof l == "object" && l != null ? l?.key ?? l?.id ?? `page-${d}` : `page-${d}`;
+    return s(
+      r(l, d, p),
+      `each-page-${g}`
+    );
+  });
+}
+function M(n, e) {
+  return n.loading && e.loading ? s(e.loading, "promise-loading") : n.error && e.error ? s(e.error(n.error), "promise-error") : n.data !== void 0 && e.success ? s(e.success(n.data), "promise-success") : e.idle ? s(e.idle, "promise-idle") : s([], "promise-fallback");
+}
+function h(n, e) {
+  const t = typeof window < "u" && window.matchMedia?.(n)?.matches;
+  return a(!!t, e);
+}
+const c = {
+  // Responsive breakpoints (matching style.ts)
+  sm: "(min-width:640px)",
+  md: "(min-width:768px)",
+  lg: "(min-width:1024px)",
+  xl: "(min-width:1280px)",
+  "2xl": "(min-width:1536px)",
+  // Dark mode (matching style.ts)
+  dark: "(prefers-color-scheme: dark)"
+}, f = ["sm", "md", "lg", "xl", "2xl"], m = {
+  // Breakpoint-based rendering (matching style.ts exactly)
+  sm: (n) => h(c.sm, n),
+  md: (n) => h(c.md, n),
+  lg: (n) => h(c.lg, n),
+  xl: (n) => h(c.xl, n),
+  "2xl": (n) => h(c["2xl"], n),
+  // Dark mode (matching style.ts)
+  dark: (n) => h(c.dark, n),
+  light: (n) => h("(prefers-color-scheme: light)", n),
+  // Accessibility and interaction preferences
+  touch: (n) => h("(hover: none) and (pointer: coarse)", n),
+  mouse: (n) => h("(hover: hover) and (pointer: fine)", n),
+  reducedMotion: (n) => h("(prefers-reduced-motion: reduce)", n),
+  highContrast: (n) => h("(prefers-contrast: high)", n),
+  // Orientation
+  portrait: (n) => h("(orientation: portrait)", n),
+  landscape: (n) => h("(orientation: landscape)", n)
+};
+function I(n, e) {
+  const t = [];
+  n.includes("dark") ? t.push(c.dark) : n.includes("light") && t.push("(prefers-color-scheme: light)");
+  const r = n.filter(
+    (u) => f.includes(u)
+  ), o = r[r.length - 1];
+  o && o in c && t.push(
+    c[o]
+  );
+  const i = t.length > 0 ? t.join(" and ") : "all";
+  return h(i, e);
+}
+function O(n) {
+  const e = [];
+  return n.base && e.push(s(n.base, "responsive-base")), f.forEach((t) => {
+    const r = n[t];
+    r && e.push(m[t](r));
+  }), e;
+}
+function j(n) {
+  const e = [];
+  let t = null;
+  return {
+    case(r, o) {
+      const i = typeof r == "function" ? r : (u) => u === r;
+      return e.push({ condition: i, content: o }), this;
+    },
+    when(r, o) {
+      return e.push({ condition: r, content: o }), this;
+    },
+    otherwise(r) {
+      return t = r, this;
+    },
+    done() {
+      for (let r = 0; r < e.length; r++) {
+        const { condition: o, content: i } = e[r];
+        if (o(n))
+          return s(i, `switch-case-${r}`);
+      }
+      return s(t || [], "switch-otherwise");
+    }
+  };
+}
+export {
+  v as eachGroup,
+  E as eachPage,
+  b as eachWhere,
+  c as mediaVariants,
+  m as responsive,
+  f as responsiveOrder,
+  O as responsiveSwitch,
+  j as switchOn,
+  $ as switchOnLength,
+  M as switchOnPromise,
+  y as unless,
+  x as whenEmpty,
+  h as whenMedia,
+  k as whenNotEmpty,
+  I as whenVariants
+};
+//# sourceMappingURL=custom-elements-runtime.directive-enhancements.es.js.map

package/dist/custom-elements-runtime.directive-enhancements.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-elements-runtime.directive-enhancements.es.js","sources":["../src/lib/directive-enhancements.ts"],"sourcesContent":["// Enhanced collection directives for better developer experience\n\nimport type { VNode } from './runtime/types';\nimport { when, anchorBlock } from './directives';\n\n/**\n * Conditional rendering with negated condition (opposite of when)\n * @param cond - Boolean condition to negate\n * @param children - Content to render when condition is false\n */\nexport function unless(cond: boolean, children: VNode | VNode[]): VNode {\n  return when(!cond, children);\n}\n\n/**\n * Render content only if array/collection is empty\n * @param collection - Array or collection to check\n * @param children - Content to render when empty\n */\nexport function whenEmpty<T>(\n  collection: T[] | null | undefined,\n  children: VNode | VNode[],\n): VNode {\n  const isEmpty = !collection || collection.length === 0;\n  return when(isEmpty, children);\n}\n\n/**\n * Render content only if array/collection has items\n * @param collection - Array or collection to check\n * @param children - Content to render when not empty\n */\nexport function whenNotEmpty<T>(\n  collection: T[] | null | undefined,\n  children: VNode | VNode[],\n): VNode {\n  const hasItems = Boolean(collection && collection.length > 0);\n  return when(hasItems, children);\n}\n\n/**\n * Enhanced each with filtering capability\n * @param list - Array to iterate over\n * @param predicate - Filter function (optional)\n * @param render - Render function for each item\n */\nexport function eachWhere<T>(\n  list: T[],\n  predicate: (item: T, index: number) => boolean,\n  render: (item: T, index: number, filteredIndex: number) => VNode | VNode[],\n): VNode[] {\n  const filtered: Array<{ item: T; originalIndex: number }> = [];\n\n  list.forEach((item, index) => {\n    if (predicate(item, index)) {\n      filtered.push({ item, originalIndex: index });\n    }\n  });\n\n  return filtered.map(({ item, originalIndex }, filteredIndex) => {\n    const itemKey =\n      typeof item === 'object' && item != null\n        ? ((item as Record<string, unknown>)?.key ??\n          (item as Record<string, unknown>)?.id ??\n          `filtered-${originalIndex}`)\n        : `filtered-${originalIndex}`;\n\n    return anchorBlock(\n      render(item, originalIndex, filteredIndex),\n      `each-where-${itemKey}`,\n    );\n  });\n}\n\n/**\n * Render different content based on array length\n * @param list - Array to check\n * @param cases - Object with length-based cases\n */\nexport function switchOnLength<T>(\n  list: T[],\n  cases: {\n    empty?: VNode | VNode[];\n    one?: (item: T) => VNode | VNode[];\n    many?: (items: T[]) => VNode | VNode[];\n    exactly?: { [count: number]: (items: T[]) => VNode | VNode[] };\n  },\n): VNode {\n  const length = list?.length ?? 0;\n\n  if (length === 0 && cases.empty) {\n    return anchorBlock(cases.empty, 'switch-length-empty');\n  }\n\n  if (length === 1 && cases.one) {\n    return anchorBlock(cases.one(list[0]), 'switch-length-one');\n  }\n\n  if (cases.exactly?.[length]) {\n    return anchorBlock(cases.exactly[length](list), `switch-length-${length}`);\n  }\n\n  if (length > 1 && cases.many) {\n    return anchorBlock(cases.many(list), 'switch-length-many');\n  }\n\n  return anchorBlock([], 'switch-length-fallback');\n}\n\n/**\n * Group array items and render each group\n * @param list - Array to group\n * @param groupBy - Function to determine group key\n * @param renderGroup - Function to render each group\n */\nexport function eachGroup<T, K extends string | number>(\n  list: T[],\n  groupBy: (item: T) => K,\n  renderGroup: (groupKey: K, items: T[], groupIndex: number) => VNode | VNode[],\n): VNode[] {\n  const groups = new Map<K, T[]>();\n\n  list.forEach((item) => {\n    const key = groupBy(item);\n    if (!groups.has(key)) {\n      groups.set(key, []);\n    }\n    groups.get(key)!.push(item);\n  });\n\n  return Array.from(groups.entries()).map(([groupKey, items], groupIndex) => {\n    return anchorBlock(\n      renderGroup(groupKey, items, groupIndex),\n      `each-group-${groupKey}`,\n    );\n  });\n}\n\n/**\n * Render with pagination/chunking\n * @param list - Array to chunk\n * @param pageSize - Items per page/chunk\n * @param currentPage - Current page (0-based)\n * @param render - Render function for visible items\n */\nexport function eachPage<T>(\n  list: T[],\n  pageSize: number,\n  currentPage: number,\n  render: (item: T, index: number, pageIndex: number) => VNode | VNode[],\n): VNode[] {\n  const startIndex = currentPage * pageSize;\n  const endIndex = Math.min(startIndex + pageSize, list.length);\n  const pageItems = list.slice(startIndex, endIndex);\n\n  return pageItems.map((item, pageIndex) => {\n    const globalIndex = startIndex + pageIndex;\n    const itemKey =\n      typeof item === 'object' && item != null\n        ? ((item as Record<string, unknown>)?.key ??\n          (item as Record<string, unknown>)?.id ??\n          `page-${globalIndex}`)\n        : `page-${globalIndex}`;\n\n    return anchorBlock(\n      render(item, globalIndex, pageIndex),\n      `each-page-${itemKey}`,\n    );\n  });\n}\n\n/* --- Async & Loading State Directives --- */\n\n/**\n * Render content based on Promise state\n * @param promiseState - Object with loading, data, error states\n * @param cases - Render functions for each state\n */\nexport function switchOnPromise<T, E = Error>(\n  promiseState: {\n    loading?: boolean;\n    data?: T;\n    error?: E;\n  },\n  cases: {\n    loading?: VNode | VNode[];\n    success?: (data: T) => VNode | VNode[];\n    error?: (error: E) => VNode | VNode[];\n    idle?: VNode | VNode[];\n  },\n): VNode {\n  if (promiseState.loading && cases.loading) {\n    return anchorBlock(cases.loading, 'promise-loading');\n  }\n\n  if (promiseState.error && cases.error) {\n    return anchorBlock(cases.error(promiseState.error), 'promise-error');\n  }\n\n  if (promiseState.data !== undefined && cases.success) {\n    return anchorBlock(cases.success(promiseState.data), 'promise-success');\n  }\n\n  if (cases.idle) {\n    return anchorBlock(cases.idle, 'promise-idle');\n  }\n\n  return anchorBlock([], 'promise-fallback');\n}\n\n/* --- Utility Directives --- */\n\n/**\n * Render content based on screen size/media query\n * @param mediaQuery - CSS media query string\n * @param children - Content to render when media query matches\n */\nexport function whenMedia(\n  mediaQuery: string,\n  children: VNode | VNode[],\n): VNode {\n  const matches =\n    typeof window !== 'undefined' && window.matchMedia?.(mediaQuery)?.matches;\n  return when(Boolean(matches), children);\n}\n\n/* --- Responsive & Media Query Directives (aligned with style.ts) --- */\n\n/**\n * Media variants matching those in style.ts\n */\nexport const mediaVariants = {\n  // Responsive breakpoints (matching style.ts)\n  sm: '(min-width:640px)',\n  md: '(min-width:768px)',\n  lg: '(min-width:1024px)',\n  xl: '(min-width:1280px)',\n  '2xl': '(min-width:1536px)',\n\n  // Dark mode (matching style.ts)\n  dark: '(prefers-color-scheme: dark)',\n} as const;\n\n/**\n * Responsive order matching style.ts\n */\nexport const responsiveOrder = ['sm', 'md', 'lg', 'xl', '2xl'] as const;\n\n/**\n * Individual responsive directives matching the style.ts breakpoint system\n */\nexport const responsive = {\n  // Breakpoint-based rendering (matching style.ts exactly)\n  sm: (children: VNode | VNode[]) => whenMedia(mediaVariants.sm, children),\n  md: (children: VNode | VNode[]) => whenMedia(mediaVariants.md, children),\n  lg: (children: VNode | VNode[]) => whenMedia(mediaVariants.lg, children),\n  xl: (children: VNode | VNode[]) => whenMedia(mediaVariants.xl, children),\n  '2xl': (children: VNode | VNode[]) =>\n    whenMedia(mediaVariants['2xl'], children),\n\n  // Dark mode (matching style.ts)\n  dark: (children: VNode | VNode[]) => whenMedia(mediaVariants.dark, children),\n  light: (children: VNode | VNode[]) =>\n    whenMedia('(prefers-color-scheme: light)', children),\n\n  // Accessibility and interaction preferences\n  touch: (children: VNode | VNode[]) =>\n    whenMedia('(hover: none) and (pointer: coarse)', children),\n  mouse: (children: VNode | VNode[]) =>\n    whenMedia('(hover: hover) and (pointer: fine)', children),\n  reducedMotion: (children: VNode | VNode[]) =>\n    whenMedia('(prefers-reduced-motion: reduce)', children),\n  highContrast: (children: VNode | VNode[]) =>\n    whenMedia('(prefers-contrast: high)', children),\n\n  // Orientation\n  portrait: (children: VNode | VNode[]) =>\n    whenMedia('(orientation: portrait)', children),\n  landscape: (children: VNode | VNode[]) =>\n    whenMedia('(orientation: landscape)', children),\n} as const;\n\n/**\n * Advanced responsive directive that matches the style.ts multi-variant processing\n * Allows chaining responsive and dark mode conditions like in CSS classes\n * @param variants - Array of variant keys (e.g., ['dark', 'lg'])\n * @param children - Content to render when all variants match\n */\nexport function whenVariants(\n  variants: Array<keyof typeof mediaVariants | 'light'>,\n  children: VNode | VNode[],\n): VNode {\n  const conditions: string[] = [];\n\n  // Process dark/light mode\n  if (variants.includes('dark')) {\n    conditions.push(mediaVariants.dark);\n  } else if (variants.includes('light')) {\n    conditions.push('(prefers-color-scheme: light)');\n  }\n\n  // Process responsive variants (take the last one, matching style.ts behavior)\n  const responsiveVariants = variants.filter((v) =>\n    responsiveOrder.includes(v as (typeof responsiveOrder)[number]),\n  );\n  const lastResponsive = responsiveVariants[responsiveVariants.length - 1];\n  if (lastResponsive && lastResponsive in mediaVariants) {\n    conditions.push(\n      mediaVariants[lastResponsive as keyof typeof mediaVariants],\n    );\n  }\n\n  const mediaQuery = conditions.length > 0 ? conditions.join(' and ') : 'all';\n  return whenMedia(mediaQuery, children);\n}\n\n/**\n * Responsive switch directive - render different content for different breakpoints\n * Mirrors the responsive behavior from the style system\n * @param content - Object with breakpoint keys and corresponding content\n */\nexport function responsiveSwitch(content: {\n  base?: VNode | VNode[];\n  sm?: VNode | VNode[];\n  md?: VNode | VNode[];\n  lg?: VNode | VNode[];\n  xl?: VNode | VNode[];\n  '2xl'?: VNode | VNode[];\n}): VNode[] {\n  const results: VNode[] = [];\n\n  // Handle light mode variants\n  if (content.base) {\n    // Base content (no media query)\n    results.push(anchorBlock(content.base, 'responsive-base'));\n  }\n\n  // Add responsive variants in order\n  responsiveOrder.forEach((breakpoint) => {\n    const breakpointContent = content[breakpoint];\n    if (breakpointContent) {\n      results.push(responsive[breakpoint](breakpointContent));\n    }\n  });\n\n  return results;\n}\n\n/* --- Enhanced Match Directive --- */\n\n/**\n * Enhanced match directive with more fluent API\n * @param value - Value to match against\n */\nexport function switchOn<T>(value: T) {\n  const branches: Array<{\n    condition: (val: T) => boolean;\n    content: VNode | VNode[];\n  }> = [];\n  let otherwiseContent: VNode | VNode[] | null = null;\n\n  return {\n    case(matcher: T | ((val: T) => boolean), content: VNode | VNode[]) {\n      const condition =\n        typeof matcher === 'function'\n          ? (matcher as (val: T) => boolean)\n          : (val: T) => val === matcher;\n\n      branches.push({ condition, content });\n      return this;\n    },\n\n    when(predicate: (val: T) => boolean, content: VNode | VNode[]) {\n      branches.push({ condition: predicate, content });\n      return this;\n    },\n\n    otherwise(content: VNode | VNode[]) {\n      otherwiseContent = content;\n      return this;\n    },\n\n    done() {\n      for (let i = 0; i < branches.length; i++) {\n        const { condition, content } = branches[i];\n        if (condition(value)) {\n          return anchorBlock(content, `switch-case-${i}`);\n        }\n      }\n      return anchorBlock(otherwiseContent || [], 'switch-otherwise');\n    },\n  };\n}\n"],"names":["unless","cond","children","when","whenEmpty","collection","isEmpty","whenNotEmpty","hasItems","eachWhere","list","predicate","render","filtered","item","index","originalIndex","filteredIndex","itemKey","anchorBlock","switchOnLength","cases","length","eachGroup","groupBy","renderGroup","groups","key","groupKey","items","groupIndex","eachPage","pageSize","currentPage","startIndex","endIndex","pageIndex","globalIndex","switchOnPromise","promiseState","whenMedia","mediaQuery","matches","mediaVariants","responsiveOrder","responsive","whenVariants","variants","conditions","responsiveVariants","v","lastResponsive","responsiveSwitch","content","results","breakpoint","breakpointContent","switchOn","value","branches","otherwiseContent","matcher","condition","val","i"],"mappings":";AAUO,SAASA,EAAOC,GAAeC,GAAkC;AACtE,SAAOC,EAAK,CAACF,GAAMC,CAAQ;AAC7B;AAOO,SAASE,EACdC,GACAH,GACO;AACP,QAAMI,IAAU,CAACD,KAAcA,EAAW,WAAW;AACrD,SAAOF,EAAKG,GAASJ,CAAQ;AAC/B;AAOO,SAASK,EACdF,GACAH,GACO;AACP,QAAMM,IAAW,GAAQH,KAAcA,EAAW,SAAS;AAC3D,SAAOF,EAAKK,GAAUN,CAAQ;AAChC;AAQO,SAASO,EACdC,GACAC,GACAC,GACS;AACT,QAAMC,IAAsD,CAAA;AAE5D,SAAAH,EAAK,QAAQ,CAACI,GAAMC,MAAU;AAC5B,IAAIJ,EAAUG,GAAMC,CAAK,KACvBF,EAAS,KAAK,EAAE,MAAAC,GAAM,eAAeC,GAAO;AAAA,EAEhD,CAAC,GAEMF,EAAS,IAAI,CAAC,EAAE,MAAAC,GAAM,eAAAE,EAAA,GAAiBC,MAAkB;AAC9D,UAAMC,IACJ,OAAOJ,KAAS,YAAYA,KAAQ,OAC9BA,GAAkC,OACnCA,GAAkC,MACnC,YAAYE,CAAa,KACzB,YAAYA,CAAa;AAE/B,WAAOG;AAAA,MACLP,EAAOE,GAAME,GAAeC,CAAa;AAAA,MACzC,cAAcC,CAAO;AAAA,IAAA;AAAA,EAEzB,CAAC;AACH;AAOO,SAASE,EACdV,GACAW,GAMO;AACP,QAAMC,IAASZ,GAAM,UAAU;AAE/B,SAAIY,MAAW,KAAKD,EAAM,QACjBF,EAAYE,EAAM,OAAO,qBAAqB,IAGnDC,MAAW,KAAKD,EAAM,MACjBF,EAAYE,EAAM,IAAIX,EAAK,CAAC,CAAC,GAAG,mBAAmB,IAGxDW,EAAM,UAAUC,CAAM,IACjBH,EAAYE,EAAM,QAAQC,CAAM,EAAEZ,CAAI,GAAG,iBAAiBY,CAAM,EAAE,IAGvEA,IAAS,KAAKD,EAAM,OACfF,EAAYE,EAAM,KAAKX,CAAI,GAAG,oBAAoB,IAGpDS,EAAY,CAAA,GAAI,wBAAwB;AACjD;AAQO,SAASI,EACdb,GACAc,GACAC,GACS;AACT,QAAMC,wBAAa,IAAA;AAEnB,SAAAhB,EAAK,QAAQ,CAACI,MAAS;AACrB,UAAMa,IAAMH,EAAQV,CAAI;AACxB,IAAKY,EAAO,IAAIC,CAAG,KACjBD,EAAO,IAAIC,GAAK,EAAE,GAEpBD,EAAO,IAAIC,CAAG,EAAG,KAAKb,CAAI;AAAA,EAC5B,CAAC,GAEM,MAAM,KAAKY,EAAO,QAAA,CAAS,EAAE,IAAI,CAAC,CAACE,GAAUC,CAAK,GAAGC,MACnDX;AAAA,IACLM,EAAYG,GAAUC,GAAOC,CAAU;AAAA,IACvC,cAAcF,CAAQ;AAAA,EAAA,CAEzB;AACH;AASO,SAASG,EACdrB,GACAsB,GACAC,GACArB,GACS;AACT,QAAMsB,IAAaD,IAAcD,GAC3BG,IAAW,KAAK,IAAID,IAAaF,GAAUtB,EAAK,MAAM;AAG5D,SAFkBA,EAAK,MAAMwB,GAAYC,CAAQ,EAEhC,IAAI,CAACrB,GAAMsB,MAAc;AACxC,UAAMC,IAAcH,IAAaE,GAC3BlB,IACJ,OAAOJ,KAAS,YAAYA,KAAQ,OAC9BA,GAAkC,OACnCA,GAAkC,MACnC,QAAQuB,CAAW,KACnB,QAAQA,CAAW;AAEzB,WAAOlB;AAAA,MACLP,EAAOE,GAAMuB,GAAaD,CAAS;AAAA,MACnC,aAAalB,CAAO;AAAA,IAAA;AAAA,EAExB,CAAC;AACH;AASO,SAASoB,EACdC,GAKAlB,GAMO;AACP,SAAIkB,EAAa,WAAWlB,EAAM,UACzBF,EAAYE,EAAM,SAAS,iBAAiB,IAGjDkB,EAAa,SAASlB,EAAM,QACvBF,EAAYE,EAAM,MAAMkB,EAAa,KAAK,GAAG,eAAe,IAGjEA,EAAa,SAAS,UAAalB,EAAM,UACpCF,EAAYE,EAAM,QAAQkB,EAAa,IAAI,GAAG,iBAAiB,IAGpElB,EAAM,OACDF,EAAYE,EAAM,MAAM,cAAc,IAGxCF,EAAY,CAAA,GAAI,kBAAkB;AAC3C;AASO,SAASqB,EACdC,GACAvC,GACO;AACP,QAAMwC,IACJ,OAAO,SAAW,OAAe,OAAO,aAAaD,CAAU,GAAG;AACpE,SAAOtC,EAAK,EAAQuC,GAAUxC,CAAQ;AACxC;AAOO,MAAMyC,IAAgB;AAAA;AAAA,EAE3B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA;AAAA,EAGP,MAAM;AACR,GAKaC,IAAkB,CAAC,MAAM,MAAM,MAAM,MAAM,KAAK,GAKhDC,IAAa;AAAA;AAAA,EAExB,IAAI,CAAC3C,MAA8BsC,EAAUG,EAAc,IAAIzC,CAAQ;AAAA,EACvE,IAAI,CAACA,MAA8BsC,EAAUG,EAAc,IAAIzC,CAAQ;AAAA,EACvE,IAAI,CAACA,MAA8BsC,EAAUG,EAAc,IAAIzC,CAAQ;AAAA,EACvE,IAAI,CAACA,MAA8BsC,EAAUG,EAAc,IAAIzC,CAAQ;AAAA,EACvE,OAAO,CAACA,MACNsC,EAAUG,EAAc,KAAK,GAAGzC,CAAQ;AAAA;AAAA,EAG1C,MAAM,CAACA,MAA8BsC,EAAUG,EAAc,MAAMzC,CAAQ;AAAA,EAC3E,OAAO,CAACA,MACNsC,EAAU,iCAAiCtC,CAAQ;AAAA;AAAA,EAGrD,OAAO,CAACA,MACNsC,EAAU,uCAAuCtC,CAAQ;AAAA,EAC3D,OAAO,CAACA,MACNsC,EAAU,sCAAsCtC,CAAQ;AAAA,EAC1D,eAAe,CAACA,MACdsC,EAAU,oCAAoCtC,CAAQ;AAAA,EACxD,cAAc,CAACA,MACbsC,EAAU,4BAA4BtC,CAAQ;AAAA;AAAA,EAGhD,UAAU,CAACA,MACTsC,EAAU,2BAA2BtC,CAAQ;AAAA,EAC/C,WAAW,CAACA,MACVsC,EAAU,4BAA4BtC,CAAQ;AAClD;AAQO,SAAS4C,EACdC,GACA7C,GACO;AACP,QAAM8C,IAAuB,CAAA;AAG7B,EAAID,EAAS,SAAS,MAAM,IAC1BC,EAAW,KAAKL,EAAc,IAAI,IACzBI,EAAS,SAAS,OAAO,KAClCC,EAAW,KAAK,+BAA+B;AAIjD,QAAMC,IAAqBF,EAAS;AAAA,IAAO,CAACG,MAC1CN,EAAgB,SAASM,CAAqC;AAAA,EAAA,GAE1DC,IAAiBF,EAAmBA,EAAmB,SAAS,CAAC;AACvE,EAAIE,KAAkBA,KAAkBR,KACtCK,EAAW;AAAA,IACTL,EAAcQ,CAA4C;AAAA,EAAA;AAI9D,QAAMV,IAAaO,EAAW,SAAS,IAAIA,EAAW,KAAK,OAAO,IAAI;AACtE,SAAOR,EAAUC,GAAYvC,CAAQ;AACvC;AAOO,SAASkD,EAAiBC,GAOrB;AACV,QAAMC,IAAmB,CAAA;AAGzB,SAAID,EAAQ,QAEVC,EAAQ,KAAKnC,EAAYkC,EAAQ,MAAM,iBAAiB,CAAC,GAI3DT,EAAgB,QAAQ,CAACW,MAAe;AACtC,UAAMC,IAAoBH,EAAQE,CAAU;AAC5C,IAAIC,KACFF,EAAQ,KAAKT,EAAWU,CAAU,EAAEC,CAAiB,CAAC;AAAA,EAE1D,CAAC,GAEMF;AACT;AAQO,SAASG,EAAYC,GAAU;AACpC,QAAMC,IAGD,CAAA;AACL,MAAIC,IAA2C;AAE/C,SAAO;AAAA,IACL,KAAKC,GAAoCR,GAA0B;AACjE,YAAMS,IACJ,OAAOD,KAAY,aACdA,IACD,CAACE,MAAWA,MAAQF;AAE1B,aAAAF,EAAS,KAAK,EAAE,WAAAG,GAAW,SAAAT,EAAA,CAAS,GAC7B;AAAA,IACT;AAAA,IAEA,KAAK1C,GAAgC0C,GAA0B;AAC7D,aAAAM,EAAS,KAAK,EAAE,WAAWhD,GAAW,SAAA0C,GAAS,GACxC;AAAA,IACT;AAAA,IAEA,UAAUA,GAA0B;AAClC,aAAAO,IAAmBP,GACZ;AAAA,IACT;AAAA,IAEA,OAAO;AACL,eAASW,IAAI,GAAGA,IAAIL,EAAS,QAAQK,KAAK;AACxC,cAAM,EAAE,WAAAF,GAAW,SAAAT,MAAYM,EAASK,CAAC;AACzC,YAAIF,EAAUJ,CAAK;AACjB,iBAAOvC,EAAYkC,GAAS,eAAeW,CAAC,EAAE;AAAA,MAElD;AACA,aAAO7C,EAAYyC,KAAoB,CAAA,GAAI,kBAAkB;AAAA,IAC/D;AAAA,EAAA;AAEJ;"}

package/dist/custom-elements-runtime.directives.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function c(n,t){const e="when-block";return o(typeof t=="function"?n?t():[]:n?t:[],e)}function h(n,t){return n.map((e,r)=>{const u=typeof e=="object"?e?.key??e?.id??`idx-${r}`:String(e);return o(t(e,r),`each-${u}`)})}function a(){const n=[];return{when(t,e){return n.push([t,e]),this},otherwise(t){return n.push([!0,t]),this},done(){return i(...n)}}}function i(...n){for(let t=0;t<n.length;t++){const[e,r]=n[t];if(e){const u=typeof r=="function"?r():r;return[o(u,`whenChain-branch-${t}`)]}}return[o([],"whenChain-empty")]}function o(n,t){const e=n?Array.isArray(n)?n.filter(r=>r!=null):[n].filter(r=>r!=null):[];return{tag:"#anchor",key:t,children:e}}exports.anchorBlock=o;exports.each=h;exports.match=a;exports.when=c;
+//# sourceMappingURL=custom-elements-runtime.directives.cjs.js.map

package/dist/custom-elements-runtime.directives.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-elements-runtime.directives.cjs.js","sources":["../src/lib/directives.ts"],"sourcesContent":["import type { VNode } from './runtime/types';\n\n/* --- When --- */\nexport function when(cond: boolean, children: VNode | VNode[]): VNode;\nexport function when(cond: boolean, factory: () => VNode | VNode[]): VNode;\nexport function when(\n  cond: boolean,\n  childrenOrFactory: VNode | VNode[] | (() => VNode | VNode[]),\n): VNode {\n  const anchorKey = 'when-block'; // stable key regardless of condition\n  if (typeof childrenOrFactory === 'function') {\n    return anchorBlock(cond ? childrenOrFactory() : [], anchorKey);\n  }\n  return anchorBlock(cond ? childrenOrFactory : [], anchorKey);\n}\n\n/* --- Each --- */\nexport function each<\n  T extends string | number | boolean | { id?: string | number; key?: string },\n>(list: T[], render: (item: T, index: number) => VNode | VNode[]): VNode[] {\n  return list.map((item, i) => {\n    // For primitives, use value as key; for objects, prefer key/id\n    const itemKey =\n      typeof item === 'object'\n        ? ((item as Record<string, unknown>)?.key ??\n          (item as Record<string, unknown>)?.id ??\n          `idx-${i}`)\n        : String(item);\n    return anchorBlock(render(item, i), `each-${itemKey}`);\n  });\n}\n\n/* --- match --- */\nexport function match() {\n  const branches: Branch[] = [];\n  return {\n    when(cond: unknown, content: VNode | VNode[] | (() => VNode | VNode[])) {\n      branches.push([cond, content]);\n      return this;\n    },\n    otherwise(content: VNode | VNode[]) {\n      branches.push([true, content]);\n      return this;\n    },\n    done() {\n      return whenChain(...branches);\n    },\n  };\n}\n\n/* --- WhenChain --- */\ntype Branch = [\n  condition: unknown,\n  content: VNode | VNode[] | (() => VNode | VNode[]),\n];\n\nfunction whenChain(...branches: Branch[]): VNode[] {\n  for (let idx = 0; idx < branches.length; idx++) {\n    const [cond, content] = branches[idx];\n    if (cond) {\n      const payload =\n        typeof content === 'function'\n          ? (content as () => VNode | VNode[])()\n          : content;\n      return [anchorBlock(payload, `whenChain-branch-${idx}`)];\n    }\n  }\n  return [anchorBlock([], 'whenChain-empty')];\n}\n\n/**\n * Create a stable anchor block with consistent boundaries.\n * Always has start/end boundaries.\n */\nexport function anchorBlock(\n  children: VNode | VNode[] | null | undefined,\n  anchorKey: string,\n): VNode {\n  // Normalize children to array, filtering out only null/undefined values.\n  // Preserve meaningful falsy values such as 0, false, and empty string.\n  const childArray = !children\n    ? []\n    : Array.isArray(children)\n      ? children.filter((c) => c !== null && c !== undefined)\n      : [children].filter((c) => c !== null && c !== undefined);\n\n  return {\n    tag: '#anchor',\n    key: anchorKey,\n    children: childArray,\n  };\n}\n"],"names":["when","cond","childrenOrFactory","anchorKey","anchorBlock","each","list","render","item","i","itemKey","match","branches","content","whenChain","idx","payload","children","childArray","c"],"mappings":"gFAKO,SAASA,EACdC,EACAC,EACO,CACP,MAAMC,EAAY,aAClB,OACSC,EADL,OAAOF,GAAsB,WACZD,EAAOC,EAAA,EAAsB,CAAA,EAE/BD,EAAOC,EAAoB,CAAA,EAFQC,CAAS,CAGjE,CAGO,SAASE,EAEdC,EAAWC,EAA8D,CACzE,OAAOD,EAAK,IAAI,CAACE,EAAMC,IAAM,CAE3B,MAAMC,EACJ,OAAOF,GAAS,SACVA,GAAkC,KACnCA,GAAkC,IACnC,OAAOC,CAAC,GACR,OAAOD,CAAI,EACjB,OAAOJ,EAAYG,EAAOC,EAAMC,CAAC,EAAG,QAAQC,CAAO,EAAE,CACvD,CAAC,CACH,CAGO,SAASC,GAAQ,CACtB,MAAMC,EAAqB,CAAA,EAC3B,MAAO,CACL,KAAKX,EAAeY,EAAoD,CACtE,OAAAD,EAAS,KAAK,CAACX,EAAMY,CAAO,CAAC,EACtB,IACT,EACA,UAAUA,EAA0B,CAClC,OAAAD,EAAS,KAAK,CAAC,GAAMC,CAAO,CAAC,EACtB,IACT,EACA,MAAO,CACL,OAAOC,EAAU,GAAGF,CAAQ,CAC9B,CAAA,CAEJ,CAQA,SAASE,KAAaF,EAA6B,CACjD,QAASG,EAAM,EAAGA,EAAMH,EAAS,OAAQG,IAAO,CAC9C,KAAM,CAACd,EAAMY,CAAO,EAAID,EAASG,CAAG,EACpC,GAAId,EAAM,CACR,MAAMe,EACJ,OAAOH,GAAY,WACdA,IACDA,EACN,MAAO,CAACT,EAAYY,EAAS,oBAAoBD,CAAG,EAAE,CAAC,CACzD,CACF,CACA,MAAO,CAACX,EAAY,GAAI,iBAAiB,CAAC,CAC5C,CAMO,SAASA,EACda,EACAd,EACO,CAGP,MAAMe,EAAcD,EAEhB,MAAM,QAAQA,CAAQ,EACpBA,EAAS,OAAQE,GAAMA,GAAM,IAAuB,EACpD,CAACF,CAAQ,EAAE,OAAQE,GAAMA,GAAM,IAAuB,EAHxD,CAAA,EAKJ,MAAO,CACL,IAAK,UACL,IAAKhB,EACL,SAAUe,CAAA,CAEd"}

package/dist/custom-elements-runtime.directives.es.js

@@ -0,0 +1,49 @@
+function c(n, t) {
+  const e = "when-block";
+  return o(typeof t == "function" ? n ? t() : [] : n ? t : [], e);
+}
+function i(n, t) {
+  return n.map((e, r) => {
+    const u = typeof e == "object" ? e?.key ?? e?.id ?? `idx-${r}` : String(e);
+    return o(t(e, r), `each-${u}`);
+  });
+}
+function a() {
+  const n = [];
+  return {
+    when(t, e) {
+      return n.push([t, e]), this;
+    },
+    otherwise(t) {
+      return n.push([!0, t]), this;
+    },
+    done() {
+      return h(...n);
+    }
+  };
+}
+function h(...n) {
+  for (let t = 0; t < n.length; t++) {
+    const [e, r] = n[t];
+    if (e) {
+      const u = typeof r == "function" ? r() : r;
+      return [o(u, `whenChain-branch-${t}`)];
+    }
+  }
+  return [o([], "whenChain-empty")];
+}
+function o(n, t) {
+  const e = n ? Array.isArray(n) ? n.filter((r) => r != null) : [n].filter((r) => r != null) : [];
+  return {
+    tag: "#anchor",
+    key: t,
+    children: e
+  };
+}
+export {
+  o as anchorBlock,
+  i as each,
+  a as match,
+  c as when
+};
+//# sourceMappingURL=custom-elements-runtime.directives.es.js.map

package/dist/custom-elements-runtime.directives.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-elements-runtime.directives.es.js","sources":["../src/lib/directives.ts"],"sourcesContent":["import type { VNode } from './runtime/types';\n\n/* --- When --- */\nexport function when(cond: boolean, children: VNode | VNode[]): VNode;\nexport function when(cond: boolean, factory: () => VNode | VNode[]): VNode;\nexport function when(\n  cond: boolean,\n  childrenOrFactory: VNode | VNode[] | (() => VNode | VNode[]),\n): VNode {\n  const anchorKey = 'when-block'; // stable key regardless of condition\n  if (typeof childrenOrFactory === 'function') {\n    return anchorBlock(cond ? childrenOrFactory() : [], anchorKey);\n  }\n  return anchorBlock(cond ? childrenOrFactory : [], anchorKey);\n}\n\n/* --- Each --- */\nexport function each<\n  T extends string | number | boolean | { id?: string | number; key?: string },\n>(list: T[], render: (item: T, index: number) => VNode | VNode[]): VNode[] {\n  return list.map((item, i) => {\n    // For primitives, use value as key; for objects, prefer key/id\n    const itemKey =\n      typeof item === 'object'\n        ? ((item as Record<string, unknown>)?.key ??\n          (item as Record<string, unknown>)?.id ??\n          `idx-${i}`)\n        : String(item);\n    return anchorBlock(render(item, i), `each-${itemKey}`);\n  });\n}\n\n/* --- match --- */\nexport function match() {\n  const branches: Branch[] = [];\n  return {\n    when(cond: unknown, content: VNode | VNode[] | (() => VNode | VNode[])) {\n      branches.push([cond, content]);\n      return this;\n    },\n    otherwise(content: VNode | VNode[]) {\n      branches.push([true, content]);\n      return this;\n    },\n    done() {\n      return whenChain(...branches);\n    },\n  };\n}\n\n/* --- WhenChain --- */\ntype Branch = [\n  condition: unknown,\n  content: VNode | VNode[] | (() => VNode | VNode[]),\n];\n\nfunction whenChain(...branches: Branch[]): VNode[] {\n  for (let idx = 0; idx < branches.length; idx++) {\n    const [cond, content] = branches[idx];\n    if (cond) {\n      const payload =\n        typeof content === 'function'\n          ? (content as () => VNode | VNode[])()\n          : content;\n      return [anchorBlock(payload, `whenChain-branch-${idx}`)];\n    }\n  }\n  return [anchorBlock([], 'whenChain-empty')];\n}\n\n/**\n * Create a stable anchor block with consistent boundaries.\n * Always has start/end boundaries.\n */\nexport function anchorBlock(\n  children: VNode | VNode[] | null | undefined,\n  anchorKey: string,\n): VNode {\n  // Normalize children to array, filtering out only null/undefined values.\n  // Preserve meaningful falsy values such as 0, false, and empty string.\n  const childArray = !children\n    ? []\n    : Array.isArray(children)\n      ? children.filter((c) => c !== null && c !== undefined)\n      : [children].filter((c) => c !== null && c !== undefined);\n\n  return {\n    tag: '#anchor',\n    key: anchorKey,\n    children: childArray,\n  };\n}\n"],"names":["when","cond","childrenOrFactory","anchorKey","anchorBlock","each","list","render","item","i","itemKey","match","branches","content","whenChain","idx","payload","children","childArray","c"],"mappings":"AAKO,SAASA,EACdC,GACAC,GACO;AACP,QAAMC,IAAY;AAClB,SACSC,EADL,OAAOF,KAAsB,aACZD,IAAOC,EAAA,IAAsB,CAAA,IAE/BD,IAAOC,IAAoB,CAAA,GAFQC,CAAS;AAGjE;AAGO,SAASE,EAEdC,GAAWC,GAA8D;AACzE,SAAOD,EAAK,IAAI,CAACE,GAAMC,MAAM;AAE3B,UAAMC,IACJ,OAAOF,KAAS,WACVA,GAAkC,OACnCA,GAAkC,MACnC,OAAOC,CAAC,KACR,OAAOD,CAAI;AACjB,WAAOJ,EAAYG,EAAOC,GAAMC,CAAC,GAAG,QAAQC,CAAO,EAAE;AAAA,EACvD,CAAC;AACH;AAGO,SAASC,IAAQ;AACtB,QAAMC,IAAqB,CAAA;AAC3B,SAAO;AAAA,IACL,KAAKX,GAAeY,GAAoD;AACtE,aAAAD,EAAS,KAAK,CAACX,GAAMY,CAAO,CAAC,GACtB;AAAA,IACT;AAAA,IACA,UAAUA,GAA0B;AAClC,aAAAD,EAAS,KAAK,CAAC,IAAMC,CAAO,CAAC,GACtB;AAAA,IACT;AAAA,IACA,OAAO;AACL,aAAOC,EAAU,GAAGF,CAAQ;AAAA,IAC9B;AAAA,EAAA;AAEJ;AAQA,SAASE,KAAaF,GAA6B;AACjD,WAASG,IAAM,GAAGA,IAAMH,EAAS,QAAQG,KAAO;AAC9C,UAAM,CAACd,GAAMY,CAAO,IAAID,EAASG,CAAG;AACpC,QAAId,GAAM;AACR,YAAMe,IACJ,OAAOH,KAAY,aACdA,MACDA;AACN,aAAO,CAACT,EAAYY,GAAS,oBAAoBD,CAAG,EAAE,CAAC;AAAA,IACzD;AAAA,EACF;AACA,SAAO,CAACX,EAAY,IAAI,iBAAiB,CAAC;AAC5C;AAMO,SAASA,EACda,GACAd,GACO;AAGP,QAAMe,IAAcD,IAEhB,MAAM,QAAQA,CAAQ,IACpBA,EAAS,OAAO,CAACE,MAAMA,KAAM,IAAuB,IACpD,CAACF,CAAQ,EAAE,OAAO,CAACE,MAAMA,KAAM,IAAuB,IAHxD,CAAA;AAKJ,SAAO;AAAA,IACL,KAAK;AAAA,IACL,KAAKhB;AAAA,IACL,UAAUe;AAAA,EAAA;AAEd;"}