@wildo-ai/saas-frontend-lib 1.0.1 → 1.1.0

package/dist/esm/components/feedback/resource-empty-state.js

@@ -3,8 +3,11 @@ import { useMemo } from 'react';
 import { createComponentResolver } from '../../core/components-registry/component-resolver.frontend.helper.js';
 import { FrontendComponentType, CorePresetNames } from '@wildo-ai/presets-components-models';
 import { useI18n } from '../../core/i18n/useI18n.js';
+import { resolveComponentLabel } from '../../core/i18n/component-label-resolution.utils.js';
 import { ResourceFrontend_EmptyStateSecondaryActionType, } from '../../core/resources/resources.frontend.schemas.js';
 import { useGuidance } from '../../core/guidance/useGuidance.js';
+import { useSurfacePolicy } from '../../core/ui/SurfacePolicyContext.js';
+import { resolveSurfaceEmptyDisplay, shouldCollapseEmptyDisplay, shouldHideEmptyDisplay, } from './empty-display-policy.utils.js';
 // ─────────────────────────────────────────────────────────────
 // Wrapper Component
 // ─────────────────────────────────────────────────────────────
@@ -23,20 +26,26 @@ const resolveEmptyState = createComponentResolver(FrontendComponentType.RESOURCE
  * - If config.primaryAction is undefined → auto-detect CREATE from hasCreateOperation
  */
 export function ResourceEmptyState({ resourceType, config, hasCreateOperation = false, onCreateAction, variant = 'default', preset = CorePresetNames.DEFAULT, }) {
-    const { tResourceEmptyState, tComponent } = useI18n({
+    const { tResourceEmptyState, tComponent, isReady } = useI18n({
         component: [FrontendComponentType.RESOURCES_LAYOUTS_EMPTY_STATE, FrontendComponentType.RESOURCES_LAYOUTS_LIST],
         resource: resourceType,
     });
     const { activateFlow } = useGuidance();
+    const surfacePolicy = useSurfacePolicy();
+    const emptyDisplay = resolveSurfaceEmptyDisplay(surfacePolicy.interactiveState?.emptyDisplay);
     // Resolve labels
     const title = useMemo(() => {
         const resourceLabel = tResourceEmptyState(resourceType, 'title');
         if (resourceLabel)
             return resourceLabel;
-        return tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'noItems') || 'No items found';
+        return resolveComponentLabel({
+            tComponent,
+            componentType: FrontendComponentType.RESOURCES_LAYOUTS_LIST,
+            key: 'noItems',
+        });
     }, [resourceType, tResourceEmptyState, tComponent]);
     const description = useMemo(() => {
-        return tResourceEmptyState(resourceType, 'description') || undefined;
+        return tResourceEmptyState(resourceType, 'description');
     }, [resourceType, tResourceEmptyState]);
     // Resolve primary action
     const showPrimaryAction = useMemo(() => {
@@ -52,7 +61,11 @@ export function ResourceEmptyState({ resourceType, config, hasCreateOperation =
         const resourceLabel = tResourceEmptyState(resourceType, 'primaryActionLabel');
         if (resourceLabel)
             return resourceLabel;
-        return tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'createFirst') || 'Create your first one';
+        return resolveComponentLabel({
+            tComponent,
+            componentType: FrontendComponentType.RESOURCES_LAYOUTS_LIST,
+            key: 'createFirst',
+        });
     }, [showPrimaryAction, resourceType, tResourceEmptyState, tComponent]);
     // Resolve icon (config.icon may be string from backend)
     const iconRef = useMemo(() => {
@@ -66,7 +79,7 @@ export function ResourceEmptyState({ resourceType, config, hasCreateOperation =
             return undefined;
         const { type, target } = config.secondaryAction;
         // Resolve label from i18n
-        const label = tResourceEmptyState(resourceType, 'secondaryActionLabel') || target;
+        const label = tResourceEmptyState(resourceType, 'secondaryActionLabel');
         if (type === ResourceFrontend_EmptyStateSecondaryActionType.LINK) {
             return {
                 label,
@@ -82,6 +95,11 @@ export function ResourceEmptyState({ resourceType, config, hasCreateOperation =
         return undefined;
     }, [config?.secondaryAction, resourceType, tResourceEmptyState, activateFlow]);
     const Component = resolveEmptyState(preset);
-    return (_jsx(Component, { title: title, description: description, iconRef: iconRef, primaryActionLabel: primaryActionLabel, onPrimaryAction: showPrimaryAction ? onCreateAction : undefined, showPrimaryAction: showPrimaryAction, secondaryAction: secondaryAction, variant: variant }));
+    if (!isReady)
+        return null;
+    if (emptyDisplay === 'render-children' || shouldCollapseEmptyDisplay(emptyDisplay)) {
+        return null;
+    }
+    return (_jsx(Component, { title: title, description: description, iconRef: iconRef, primaryActionLabel: primaryActionLabel, onPrimaryAction: showPrimaryAction ? onCreateAction : undefined, showPrimaryAction: showPrimaryAction, secondaryAction: secondaryAction, variant: variant, hidden: shouldHideEmptyDisplay(emptyDisplay), style: shouldHideEmptyDisplay(emptyDisplay) ? { display: 'none' } : undefined }));
 }
-//# sourceMappingURL=resource-empty-state.js.map
+//# sourceMappingURL=resource-empty-state.js.map

package/dist/esm/components/feedback/resource-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"resource-empty-state.js","sourceRoot":"","sources":["../../../../src/components/feedback/resource-empty-state.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"resource-empty-state.js","sourceRoot":"","sources":["../../../../../src/components/feedback/resource-empty-state.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from 'react';\nimport { createComponentResolver } from '~wildo-frontend-lib/core/components-registry/component-resolver.frontend.helper';\nimport { FrontendComponentType, CorePresetNames } from '@wildo-ai/presets-components-models';\nimport { StandardIconReference } from '~wildo-frontend-lib/core/icons/icon-registry.frontend.schemas';\nimport type { ComponentPresetProps } from '~wildo-frontend-lib/core/components-registry/component-registry.frontend.schemas';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { resolveComponentLabel } from '~wildo-frontend-lib/core/i18n/component-label-resolution.utils';\nimport {\n  type ResourceUIBehavior_EmptyState,\n  ResourceFrontend_EmptyStateSecondaryActionType,\n} from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\nimport { useGuidance } from '~wildo-frontend-lib/core/guidance/useGuidance';\nimport type { EmptyStateProps } from './empty-state';\nimport { useSurfacePolicy } from '~wildo-frontend-lib/core/ui/SurfacePolicyContext';\nimport {\n  resolveSurfaceEmptyDisplay,\n  shouldCollapseEmptyDisplay,\n  shouldHideEmptyDisplay,\n} from './empty-display-policy.utils';\n\n// ─────────────────────────────────────────────────────────────\n// Wrapper Props\n// ─────────────────────────────────────────────────────────────\n\nexport interface ResourceEmptyStateWrapperProps extends ComponentPresetProps {\n  /** Resource type — used for i18n key lookup */\n  resourceType: string;\n  /** Empty state config from frontendConfiguration.emptyState */\n  config?: ResourceUIBehavior_EmptyState;\n  /** Whether the CREATE operation is available for this resource */\n  hasCreateOperation?: boolean;\n  /** Callback when the primary action (e.g. CREATE) is clicked */\n  onCreateAction?: () => void;\n  /** Variant: 'default' for list/table, 'compact' for inline contexts */\n  variant?: 'default' | 'compact';\n}\n\n// ─────────────────────────────────────────────────────────────\n// Wrapper Component\n// ─────────────────────────────────────────────────────────────\n\nconst resolveEmptyState = createComponentResolver<EmptyStateProps>(\n  FrontendComponentType.RESOURCES_LAYOUTS_EMPTY_STATE,\n  'ResourceEmptyState',\n);\n\n/**\n * ResourceEmptyState — bridges resource config + i18n to the generic EmptyState preset.\n *\n * Resolves labels from i18n with the following priority:\n * 1. Resource-specific: `resources.{resourceType}.emptyState.title`\n * 2. Generic fallback: `tComponent(RESOURCES_LAYOUTS_LIST, 'noItems')`\n * 3. Hardcoded fallback: \"No items found\"\n *\n * Primary action:\n * - If config.primaryAction === false → no button\n * - If config.primaryAction is a string → use that operation ref (label from i18n)\n * - If config.primaryAction is undefined → auto-detect CREATE from hasCreateOperation\n */\nexport function ResourceEmptyState({\n  resourceType,\n  config,\n  hasCreateOperation = false,\n  onCreateAction,\n  variant = 'default',\n  preset = CorePresetNames.DEFAULT,\n}: ResourceEmptyStateWrapperProps): React.JSX.Element | null {\n  const { tResourceEmptyState, tComponent, isReady } = useI18n({\n    component: [FrontendComponentType.RESOURCES_LAYOUTS_EMPTY_STATE, FrontendComponentType.RESOURCES_LAYOUTS_LIST],\n    resource: resourceType,\n  });\n  const { activateFlow } = useGuidance();\n  const surfacePolicy = useSurfacePolicy();\n  const emptyDisplay = resolveSurfaceEmptyDisplay(surfacePolicy.interactiveState?.emptyDisplay);\n\n  // Resolve labels\n  const title = useMemo(() => {\n    const resourceLabel = tResourceEmptyState(resourceType, 'title');\n    if (resourceLabel) return resourceLabel;\n    return resolveComponentLabel({\n      tComponent,\n      componentType: FrontendComponentType.RESOURCES_LAYOUTS_LIST,\n      key: 'noItems',\n    });\n  }, [resourceType, tResourceEmptyState, tComponent]);\n\n  const description = useMemo(() => {\n    return tResourceEmptyState(resourceType, 'description');\n  }, [resourceType, tResourceEmptyState]);\n\n  // Resolve primary action\n  const showPrimaryAction = useMemo(() => {\n    if (config?.primaryAction === false) return false;\n    if (config?.primaryAction) return true; // Explicit operation ref\n    return hasCreateOperation; // Auto-detect\n  }, [config?.primaryAction, hasCreateOperation]);\n\n  const primaryActionLabel = useMemo(() => {\n    if (!showPrimaryAction) return undefined;\n    const resourceLabel = tResourceEmptyState(resourceType, 'primaryActionLabel');\n    if (resourceLabel) return resourceLabel;\n    return resolveComponentLabel({\n      tComponent,\n      componentType: FrontendComponentType.RESOURCES_LAYOUTS_LIST,\n      key: 'createFirst',\n    });\n  }, [showPrimaryAction, resourceType, tResourceEmptyState, tComponent]);\n\n  // Resolve icon (config.icon may be string from backend)\n  const iconRef = useMemo<StandardIconReference | undefined>(() => {\n    if (config?.icon) return config.icon as StandardIconReference;\n    return undefined;\n  }, [config?.icon]);\n\n  // Resolve secondary action\n  const secondaryAction = useMemo<{ label: string; onClick: () => void } | undefined>(() => {\n    if (!config?.secondaryAction) return undefined;\n    const { type, target } = config.secondaryAction;\n\n    // Resolve label from i18n\n    const label = tResourceEmptyState(resourceType, 'secondaryActionLabel');\n\n    if (type === ResourceFrontend_EmptyStateSecondaryActionType.LINK) {\n      return {\n        label,\n        onClick: () => { window.open(target, '_blank', 'noopener,noreferrer'); },\n      };\n    }\n\n    if (type === ResourceFrontend_EmptyStateSecondaryActionType.GUIDANCE) {\n      return {\n        label,\n        onClick: () => activateFlow(target),\n      };\n    }\n\n    return undefined;\n  }, [config?.secondaryAction, resourceType, tResourceEmptyState, activateFlow]);\n\n  const Component = resolveEmptyState(preset);\n\n  if (!isReady) return null;\n\n  if (emptyDisplay === 'render-children' || shouldCollapseEmptyDisplay(emptyDisplay)) {\n    return null;\n  }\n\n  return (\n    <Component\n      title={title}\n      description={description}\n      iconRef={iconRef}\n      primaryActionLabel={primaryActionLabel}\n      onPrimaryAction={showPrimaryAction ? onCreateAction : undefined}\n      showPrimaryAction={showPrimaryAction}\n      secondaryAction={secondaryAction}\n      variant={variant}\n      hidden={shouldHideEmptyDisplay(emptyDisplay)}\n      style={shouldHideEmptyDisplay(emptyDisplay) ? { display: 'none' } : undefined}\n    />\n  );\n}\n"]}

package/dist/esm/components/feedback/skeleton-text.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface SkeletonTextProps {
+    /** When true, render a space-reserving inline placeholder instead of the text. */
+    loading: boolean;
+    /** The resolved text/label to show once `loading` is false. */
+    children: React.ReactNode;
+    /**
+     * Inline width reserved while loading — any CSS length (e.g. `'5em'`, `'8ch'`).
+     * Pick an estimate close to the final text so the swap causes no layout shift.
+     * Defaults to `'4em'`.
+     */
+    width?: string;
+    className?: string;
+}
+/**
+ * Inline label placeholder — the leaf building block for single-wave,
+ * shift-free content loading.
+ *
+ * While `loading`, renders a space-reserving inline `Skeleton` sized to `width`;
+ * otherwise renders `children`. Use this at the individual label/value leaf
+ * INSTEAD of gating a whole component with `if (!isReady) return null`. Keeping
+ * the surrounding structure mounted is what breaks the i18n "waterfall": every
+ * leaf is requested in the same tick, the keys coalesce into one micro-batched
+ * fetch, and the skeletons swap to real text together — progressive and lazy,
+ * but perceived as atomic.
+ *
+ * See `.claude/plans/progressive-form-skeleton-rendering.md`.
+ */
+export declare function SkeletonText({ loading, children, width, className }: SkeletonTextProps): React.ReactNode;
+export declare namespace SkeletonText {
+    var displayName: string;
+}
+//# sourceMappingURL=skeleton-text.d.ts.map

package/dist/esm/components/feedback/skeleton-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-text.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/skeleton-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,iBAAiB;IAChC,kFAAkF;IAClF,OAAO,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAa,EAAE,SAAS,EAAE,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAShH;yBATe,YAAY"}

package/dist/esm/components/feedback/skeleton-text.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from '../../components/feedback/skeleton.js';
+import { cn } from '../../core/ui/cn.js';
+/**
+ * Inline label placeholder — the leaf building block for single-wave,
+ * shift-free content loading.
+ *
+ * While `loading`, renders a space-reserving inline `Skeleton` sized to `width`;
+ * otherwise renders `children`. Use this at the individual label/value leaf
+ * INSTEAD of gating a whole component with `if (!isReady) return null`. Keeping
+ * the surrounding structure mounted is what breaks the i18n "waterfall": every
+ * leaf is requested in the same tick, the keys coalesce into one micro-batched
+ * fetch, and the skeletons swap to real text together — progressive and lazy,
+ * but perceived as atomic.
+ *
+ * See `.claude/plans/progressive-form-skeleton-rendering.md`.
+ */
+export function SkeletonText({ loading, children, width = '4em', className }) {
+    if (!loading)
+        return children;
+    return (_jsx(Skeleton, { "aria-hidden": "true", className: cn('inline-block h-[1em] align-[-0.125em] rounded-sm', className), style: { width } }));
+}
+SkeletonText.displayName = 'SkeletonText';
+//# sourceMappingURL=skeleton-text.js.map

package/dist/esm/components/feedback/skeleton-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-text.js","sourceRoot":"","sources":["../../../../../src/components/feedback/skeleton-text.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,kDAAkD,CAAC;AAC5E,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AAgBpD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,SAAS,EAAqB;IAC7F,IAAI,CAAC,OAAO;QAAE,OAAO,QAAQ,CAAC;IAC9B,OAAO,CACL,KAAC,QAAQ,mBACK,MAAM,EAClB,SAAS,EAAE,EAAE,CAAC,kDAAkD,EAAE,SAAS,CAAC,EAC5E,KAAK,EAAE,EAAE,KAAK,EAAE,GAChB,CACH,CAAC;AACJ,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Skeleton } from '~wildo-frontend-lib/components/feedback/skeleton';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\n\nexport interface SkeletonTextProps {\n  /** When true, render a space-reserving inline placeholder instead of the text. */\n  loading: boolean;\n  /** The resolved text/label to show once `loading` is false. */\n  children: React.ReactNode;\n  /**\n   * Inline width reserved while loading — any CSS length (e.g. `'5em'`, `'8ch'`).\n   * Pick an estimate close to the final text so the swap causes no layout shift.\n   * Defaults to `'4em'`.\n   */\n  width?: string;\n  className?: string;\n}\n\n/**\n * Inline label placeholder — the leaf building block for single-wave,\n * shift-free content loading.\n *\n * While `loading`, renders a space-reserving inline `Skeleton` sized to `width`;\n * otherwise renders `children`. Use this at the individual label/value leaf\n * INSTEAD of gating a whole component with `if (!isReady) return null`. Keeping\n * the surrounding structure mounted is what breaks the i18n \"waterfall\": every\n * leaf is requested in the same tick, the keys coalesce into one micro-batched\n * fetch, and the skeletons swap to real text together — progressive and lazy,\n * but perceived as atomic.\n *\n * See `.claude/plans/progressive-form-skeleton-rendering.md`.\n */\nexport function SkeletonText({ loading, children, width = '4em', className }: SkeletonTextProps): React.ReactNode {\n  if (!loading) return children;\n  return (\n    <Skeleton\n      aria-hidden=\"true\"\n      className={cn('inline-block h-[1em] align-[-0.125em] rounded-sm', className)}\n      style={{ width }}\n    />\n  );\n}\n\nSkeletonText.displayName = 'SkeletonText';\n"]}

package/dist/esm/components/feedback/skeleton.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
-import { ComponentPresetProps } from '../../core/components-registry/component-registry.frontend.schemas.js';
-export type SkeletonProps = React.ComponentProps<"div">;
-export declare function Skeleton({ preset, ...props }: SkeletonProps & ComponentPresetProps): React.JSX.Element;
+import { type SkeletonDensity, type SkeletonTemplate } from '@wildo-ai/presets-components-models';
+import { ComponentPresetProps } from '../../core/components-registry/component-registry.frontend.schemas';
+export type SkeletonProps = React.ComponentProps<"div"> & {
+    template?: SkeletonTemplate | 'auto';
+    density?: SkeletonDensity | 'auto';
+};
+export declare function Skeleton({ preset, template, density, className, ...props }: SkeletonProps & ComponentPresetProps): React.JSX.Element;
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/esm/components/feedback/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,oBAAoB,EAAE,MAAM,kFAAkF,CAAA;AAGvH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAGvD,wBAAgB,QAAQ,CAAC,EAAE,MAAgC,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,GAAG,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAGhI"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAIL,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACtB,MAAM,qCAAqC,CAAA;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,kFAAkF,CAAA;AAKvH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACxD,QAAQ,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAA;IACpC,OAAO,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACnC,CAAA;AAsED,wBAAgB,QAAQ,CAAC,EACvB,MAAgC,EAChC,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,GAAG,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2C1D"}

package/dist/esm/components/feedback/skeleton.js

@@ -1,9 +1,79 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
 import { createComponentResolver } from '../../core/components-registry/component-resolver.frontend.helper.js';
-import { FrontendComponentType, CorePresetNames } from '@wildo-ai/presets-components-models';
+import { CorePresetNames, FRAMEWORK_DEFAULT_SURFACE_POLICIES, FrontendComponentType, } from '@wildo-ai/presets-components-models';
+import { SurfacePolicyContext } from '../../core/ui/SurfacePolicyContext.js';
+import { cn } from '../../core/ui/cn.js';
+const TEMPLATE_ROWS = {
+    list: ['h-4 w-3/4', 'h-4 w-full', 'h-4 w-2/3'],
+    detail: ['h-6 w-1/3', 'h-4 w-full', 'h-4 w-2/3'],
+    table: ['h-8 w-full', 'h-8 w-full', 'h-8 w-full', 'h-8 w-full'],
+    card: ['h-32 w-full', 'h-5 w-2/3', 'h-4 w-full'],
+};
+function isSkeletonTemplate(value) {
+    return value !== undefined && value !== 'reset';
+}
+function isConcreteSkeletonDensity(value) {
+    return value !== undefined && value !== 'reset' && value !== 'inherit';
+}
+function densityClass(density) {
+    switch (density) {
+        case 'sm':
+            return 'space-y-item-xs';
+        case 'lg':
+            return 'space-y-card';
+        case 'md':
+        default:
+            return 'space-y-field';
+    }
+}
+function resolveTemplate(value, policyTemplate) {
+    if (value === undefined || value === 'auto') {
+        return isSkeletonTemplate(policyTemplate) ? policyTemplate : undefined;
+    }
+    return value;
+}
+function shouldApplyPolicyTemplate(template, className, style) {
+    if (template === 'auto') {
+        return true;
+    }
+    if (template !== undefined) {
+        return false;
+    }
+    return className === undefined && style === undefined;
+}
+function resolveDensity(value, policyDensity, fallbackDensity) {
+    if (value && value !== 'auto' && value !== 'inherit') {
+        return value;
+    }
+    if (isConcreteSkeletonDensity(policyDensity)) {
+        return policyDensity;
+    }
+    return fallbackDensity;
+}
 // --- Wrapper ---
-export function Skeleton({ preset = CorePresetNames.DEFAULT, ...props }) {
+export function Skeleton({ preset = CorePresetNames.DEFAULT, template, density, className, ...props }) {
+    const surfacePolicyContext = React.useContext(SurfacePolicyContext);
+    const surfacePolicy = surfacePolicyContext?.policy;
     const Component = createComponentResolver(FrontendComponentType.LOW_LEVEL_SKELETON, 'Skeleton')(preset);
-    return _jsx(Component, { ...props });
+    const policyTemplate = surfacePolicy?.skeleton?.skeletonTemplate;
+    const policyDensity = surfacePolicy?.skeleton?.skeletonDensity;
+    const frameworkFallbackDensity = surfacePolicyContext
+        ? FRAMEWORK_DEFAULT_SURFACE_POLICIES[surfacePolicyContext.variant].skeleton?.skeletonDensity
+        : undefined;
+    const fallbackDensity = isConcreteSkeletonDensity(frameworkFallbackDensity) ? frameworkFallbackDensity : 'md';
+    const resolvedTemplate = surfacePolicy && shouldApplyPolicyTemplate(template, className, props.style)
+        ? resolveTemplate(template, policyTemplate)
+        : template === 'auto' || template === undefined
+            ? undefined
+            : template;
+    if (!resolvedTemplate || resolvedTemplate === 'inherit') {
+        return _jsx(Component, { className: className, ...props });
+    }
+    if (resolvedTemplate === 'none') {
+        return _jsx(_Fragment, {});
+    }
+    const resolvedDensity = resolveDensity(density, policyDensity, fallbackDensity);
+    return (_jsx("div", { "data-slot": "skeleton-template", "data-skeleton-template": resolvedTemplate, "data-skeleton-density": resolvedDensity, className: cn(densityClass(resolvedDensity), className), ...props, children: TEMPLATE_ROWS[resolvedTemplate].map((rowClassName, index) => (_jsx(Component, { className: rowClassName, "aria-hidden": "true" }, `${resolvedTemplate}-${index}`))) }));
 }
-//# sourceMappingURL=skeleton.js.map
+//# sourceMappingURL=skeleton.js.map

package/dist/esm/components/feedback/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../../src/components/feedback/skeleton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,iFAAiF,CAAA;AACzH,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AAM5F,kBAAkB;AAClB,MAAM,UAAU,QAAQ,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,OAAO,EAAE,GAAG,KAAK,EAAwC;IAC3G,MAAM,SAAS,GAAG,uBAAuB,CAAgB,qBAAqB,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;IACtH,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAA;AACjC,CAAC"}
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../../../src/components/feedback/skeleton.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { createComponentResolver } from '~wildo-frontend-lib/core/components-registry/component-resolver.frontend.helper'\nimport {\n  CorePresetNames,\n  FRAMEWORK_DEFAULT_SURFACE_POLICIES,\n  FrontendComponentType,\n  type SkeletonDensity,\n  type SkeletonTemplate,\n} from '@wildo-ai/presets-components-models'\nimport { ComponentPresetProps } from '~wildo-frontend-lib/core/components-registry/component-registry.frontend.schemas'\nimport { SurfacePolicyContext } from '~wildo-frontend-lib/core/ui/SurfacePolicyContext'\nimport { cn } from '~wildo-frontend-lib/core/ui/cn'\n\n// --- Contract ---\nexport type SkeletonProps = React.ComponentProps<\"div\"> & {\n  template?: SkeletonTemplate | 'auto'\n  density?: SkeletonDensity | 'auto'\n}\n\ntype ConcreteSkeletonDensity = Exclude<SkeletonDensity, 'inherit'>\n\nconst TEMPLATE_ROWS: Record<Exclude<SkeletonTemplate, 'inherit' | 'none'>, string[]> = {\n  list: ['h-4 w-3/4', 'h-4 w-full', 'h-4 w-2/3'],\n  detail: ['h-6 w-1/3', 'h-4 w-full', 'h-4 w-2/3'],\n  table: ['h-8 w-full', 'h-8 w-full', 'h-8 w-full', 'h-8 w-full'],\n  card: ['h-32 w-full', 'h-5 w-2/3', 'h-4 w-full'],\n}\n\ntype SurfaceSkeletonTemplateValue = SkeletonTemplate | 'reset' | undefined\ntype SurfaceSkeletonDensityValue = SkeletonDensity | 'reset' | undefined\n\nfunction isSkeletonTemplate(value: SurfaceSkeletonTemplateValue): value is SkeletonTemplate {\n  return value !== undefined && value !== 'reset'\n}\n\nfunction isConcreteSkeletonDensity(value: SurfaceSkeletonDensityValue): value is ConcreteSkeletonDensity {\n  return value !== undefined && value !== 'reset' && value !== 'inherit'\n}\n\nfunction densityClass(density: ConcreteSkeletonDensity): string {\n  switch (density) {\n    case 'sm':\n      return 'space-y-item-xs'\n    case 'lg':\n      return 'space-y-card'\n    case 'md':\n    default:\n      return 'space-y-field'\n  }\n}\n\nfunction resolveTemplate(value: SkeletonTemplate | 'auto' | undefined, policyTemplate: SurfaceSkeletonTemplateValue): SkeletonTemplate | undefined {\n  if (value === undefined || value === 'auto') {\n    return isSkeletonTemplate(policyTemplate) ? policyTemplate : undefined\n  }\n  return value\n}\n\nfunction shouldApplyPolicyTemplate(\n  template: SkeletonTemplate | 'auto' | undefined,\n  className: string | undefined,\n  style: React.CSSProperties | undefined,\n): boolean {\n  if (template === 'auto') {\n    return true\n  }\n  if (template !== undefined) {\n    return false\n  }\n  return className === undefined && style === undefined\n}\n\nfunction resolveDensity(\n  value: SkeletonDensity | 'auto' | undefined,\n  policyDensity: SurfaceSkeletonDensityValue,\n  fallbackDensity: ConcreteSkeletonDensity,\n): ConcreteSkeletonDensity {\n  if (value && value !== 'auto' && value !== 'inherit') {\n    return value\n  }\n  if (isConcreteSkeletonDensity(policyDensity)) {\n    return policyDensity\n  }\n  return fallbackDensity\n}\n\n// --- Wrapper ---\nexport function Skeleton({\n  preset = CorePresetNames.DEFAULT,\n  template,\n  density,\n  className,\n  ...props\n}: SkeletonProps & ComponentPresetProps): React.JSX.Element {\n  const surfacePolicyContext = React.useContext(SurfacePolicyContext)\n  const surfacePolicy = surfacePolicyContext?.policy\n  const Component = createComponentResolver<SkeletonProps>(FrontendComponentType.LOW_LEVEL_SKELETON, 'Skeleton')(preset)\n  const policyTemplate = surfacePolicy?.skeleton?.skeletonTemplate as SurfaceSkeletonTemplateValue\n  const policyDensity = surfacePolicy?.skeleton?.skeletonDensity as SurfaceSkeletonDensityValue\n  const frameworkFallbackDensity = surfacePolicyContext\n    ? FRAMEWORK_DEFAULT_SURFACE_POLICIES[surfacePolicyContext.variant].skeleton?.skeletonDensity\n    : undefined\n  const fallbackDensity = isConcreteSkeletonDensity(frameworkFallbackDensity) ? frameworkFallbackDensity : 'md'\n  const resolvedTemplate = surfacePolicy && shouldApplyPolicyTemplate(template, className, props.style)\n    ? resolveTemplate(template, policyTemplate)\n    : template === 'auto' || template === undefined\n      ? undefined\n      : template\n\n  if (!resolvedTemplate || resolvedTemplate === 'inherit') {\n    return <Component className={className} {...props} />\n  }\n\n  if (resolvedTemplate === 'none') {\n    return <></>\n  }\n\n  const resolvedDensity = resolveDensity(density, policyDensity, fallbackDensity)\n\n  return (\n    <div\n      data-slot=\"skeleton-template\"\n      data-skeleton-template={resolvedTemplate}\n      data-skeleton-density={resolvedDensity}\n      className={cn(densityClass(resolvedDensity), className)}\n      {...props}\n    >\n      {TEMPLATE_ROWS[resolvedTemplate].map((rowClassName, index) => (\n        <Component\n          key={`${resolvedTemplate}-${index}`}\n          className={rowClassName}\n          aria-hidden=\"true\"\n        />\n      ))}\n    </div>\n  )\n}\n"]}

package/dist/esm/components/feedback/toast.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ToasterProps } from 'sonner';
-import { ComponentPresetProps } from '../../core/components-registry/component-registry.frontend.schemas.js';
+import { ComponentPresetProps } from '../../core/components-registry/component-registry.frontend.schemas';
 export type { ToasterProps };
 export declare function Toaster({ preset, ...props }: ToasterProps & ComponentPresetProps): React.JSX.Element;
 //# sourceMappingURL=toast.d.ts.map

package/dist/esm/components/feedback/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAA;AAG1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,kFAAkF,CAAA;AAGvH,YAAY,EAAE,YAAY,EAAE,CAAA;AAG5B,wBAAgB,OAAO,CAAC,EAAE,MAAgC,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,GAAG,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAG9H"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAA;AAG1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,kFAAkF,CAAA;AAGvH,YAAY,EAAE,YAAY,EAAE,CAAA;AAG5B,wBAAgB,OAAO,CAAC,EAAE,MAAgC,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,GAAG,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAG9H"}

package/dist/esm/components/feedback/toast.js

@@ -6,4 +6,4 @@ export function Toaster({ preset = CorePresetNames.DEFAULT, ...props }) {
     const Component = createComponentResolver(FrontendComponentType.LOW_LEVEL_TOAST, 'Toaster')(preset);
     return _jsx(Component, { ...props });
 }
-//# sourceMappingURL=toast.js.map
+//# sourceMappingURL=toast.js.map

package/dist/esm/components/feedback/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../../src/components/feedback/toast.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,iFAAiF,CAAA;AACzH,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AAM5F,kBAAkB;AAClB,MAAM,UAAU,OAAO,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,OAAO,EAAE,GAAG,KAAK,EAAuC;IACzG,MAAM,SAAS,GAAG,uBAAuB,CAAe,qBAAqB,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;IACjH,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAA;AACjC,CAAC"}
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../../../src/components/feedback/toast.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,iFAAiF,CAAA;AACzH,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AAM5F,kBAAkB;AAClB,MAAM,UAAU,OAAO,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,OAAO,EAAE,GAAG,KAAK,EAAuC;IACzG,MAAM,SAAS,GAAG,uBAAuB,CAAe,qBAAqB,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;IACjH,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAA;AACjC,CAAC","sourcesContent":["import React from 'react'\nimport { type ToasterProps } from 'sonner'\nimport { createComponentResolver } from '~wildo-frontend-lib/core/components-registry/component-resolver.frontend.helper'\nimport { FrontendComponentType, CorePresetNames } from '@wildo-ai/presets-components-models'\nimport { ComponentPresetProps } from '~wildo-frontend-lib/core/components-registry/component-registry.frontend.schemas'\n\n// --- Contract ---\nexport type { ToasterProps }\n\n// --- Wrapper ---\nexport function Toaster({ preset = CorePresetNames.DEFAULT, ...props }: ToasterProps & ComponentPresetProps): React.JSX.Element {\n  const Component = createComponentResolver<ToasterProps>(FrontendComponentType.LOW_LEVEL_TOAST, 'Toaster')(preset)\n  return <Component {...props} />\n}\n"]}

package/dist/esm/components/flows-actors/actor.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { Card } from "../../components/sections/card.js";
+import { Card } from "../../components/sections/card";
 import type { ComponentProps } from "react";
 import type { Actor } from "@wildo-ai/saas-models";
-import type { FlowsActorsExecution } from "../../core/flows-actors/FlowsActorsContext.js";
+import type { FlowsActorsExecution } from "../../core/flows-actors/FlowsActorsContext";
 type ActorStatus = "idle" | "executing" | "blocked" | "completed";
 export type AI_ActorTeamProps = ComponentProps<"div"> & {
     systemName?: string;
@@ -11,7 +11,7 @@ export type AI_ActorTeamProps = ComponentProps<"div"> & {
     children?: React.ReactNode;
     executions?: Map<string, FlowsActorsExecution>;
 };
-export declare const AI_ActorTeam: ({ systemName, actors: actorsProp, systemRef, executions: executionsProp, className, children, ...props }: AI_ActorTeamProps) => React.JSX.Element;
+export declare const AI_ActorTeam: ({ systemName, actors: actorsProp, systemRef, executions: executionsProp, className, children, ...props }: AI_ActorTeamProps) => React.JSX.Element | null;
 export type AI_ActorCardProps = ComponentProps<typeof Card> & {
     actor?: Actor;
     actorRef?: string;
@@ -26,16 +26,16 @@ export type AI_ActorCardProps = ComponentProps<typeof Card> & {
     onAgentClick?: (agentRef: string) => void;
     onFlowClick?: (flowRef: string) => void;
 };
-export declare const AI_ActorCard: ({ actor, actorRef: actorRefProp, displayName: displayNameProp, roleCategory: roleCategoryProp, executionMode: executionModeProp, description: descriptionProp, agentRef: agentRefProp, flowRef: flowRefProp, status, currentTask, onAgentClick, onFlowClick, className, ...props }: AI_ActorCardProps) => React.JSX.Element;
+export declare const AI_ActorCard: ({ actor, actorRef: actorRefProp, displayName: displayNameProp, roleCategory: roleCategoryProp, executionMode: executionModeProp, description: descriptionProp, agentRef: agentRefProp, flowRef: flowRefProp, status, currentTask, onAgentClick, onFlowClick, className, ...props }: AI_ActorCardProps) => React.JSX.Element | null;
 export type AI_ActorRoleBadgeProps = {
     role: string;
     className?: string;
 };
-export declare const AI_ActorRoleBadge: ({ role, className, }: AI_ActorRoleBadgeProps) => React.JSX.Element;
+export declare const AI_ActorRoleBadge: ({ role, className, }: AI_ActorRoleBadgeProps) => React.JSX.Element | null;
 export type AI_ActorExecutionModeBadgeProps = {
     mode: string;
     className?: string;
 };
-export declare const AI_ActorExecutionModeBadge: ({ mode, className, }: AI_ActorExecutionModeBadgeProps) => React.JSX.Element;
+export declare const AI_ActorExecutionModeBadge: ({ mode, className, }: AI_ActorExecutionModeBadgeProps) => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=actor.d.ts.map

package/dist/esm/components/flows-actors/actor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actor.d.ts","sourceRoot":"","sources":["../../../../src/components/flows-actors/actor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAmE,MAAM,8CAA8C,CAAC;AAerI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0DAA0D,CAAC;AAmFrG,KAAK,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;AAoBlE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,0GAQ1B,iBAAiB,KAAG,KAAK,CAAC,GAAG,CAAC,OAqHhC,CAAC;AAgMF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IAC5D,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,oRAe1B,iBAAiB,KAAG,KAAK,CAAC,GAAG,CAAC,OA0HhC,CAAC;AAMF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,sBAG/B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAcrC,CAAC;AAMF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,sBAGxC,+BAA+B,KAAG,KAAK,CAAC,GAAG,CAAC,OA2B9C,CAAC"}
+{"version":3,"file":"actor.d.ts","sourceRoot":"","sources":["../../../../../src/components/flows-actors/actor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAmE,MAAM,8CAA8C,CAAC;AAgBrI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0DAA0D,CAAC;AAoFrG,KAAK,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;AAoBlE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,0GAQ1B,iBAAiB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAuH1C,CAAC;AAgMF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IAC5D,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,oRAe1B,iBAAiB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IA4H1C,CAAC;AAMF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,sBAG/B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAgB/C,CAAC;AAMF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,sBAGxC,+BAA+B,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IA6BxD,CAAC"}

package/dist/esm/components/flows-actors/actor.js

@@ -4,18 +4,19 @@ import * as React from "react";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/sections/card.js";
 import { Badge } from "../../components/data-display/badge.js";
 import { Button, ButtonVariants_Variant } from "../../components/actions/button.js";
-import { ButtonSize, PlacementSide } from "@wildo-ai/presets-components-models";
+import { ButtonSize, FrontendComponentType, PlacementSide } from "@wildo-ai/presets-components-models";
 import { Skeleton } from "../../components/feedback/skeleton.js";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../../components/overlays/floating/tooltip.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/sections/collapsible.js";
 import { AI_Canvas } from "../../components/ai-elements/graph/canvas.js";
 import { AI_Controls } from "../../components/ai-elements/graph/controls.js";
-import { useI18n } from "@wildo-ai/saas-frontend-lib";
+import { useI18n } from "../../core/i18n/useI18n.js";
+import { Text } from "../../components/typography/text.js";
+import { TextSize, TextVariant } from "@wildo-ai/presets-components-models";
 import { useIconRegistry } from "../../core/icons/useIconRegistry.js";
 import { IconSize, StandardIconReference } from "../../core/icons/icon-registry.frontend.schemas.js";
 import { Handle, Position } from "@xyflow/react";
 import { cn } from "../../core/ui/cn.js";
-import { FrontendComponentType } from "@wildo-ai/presets-components-models";
 import { useFlowsActorsSafe } from "../../core/flows-actors/useFlowsActors.js";
 import { FlowsActorsExecutionStatus } from "../../core/flows-actors/FlowsActorsContext.js";
 //===============================================================
@@ -28,6 +29,11 @@ import { FlowsActorsExecutionStatus } from "../../core/flows-actors/FlowsActorsC
 // - actors-system.backend.service.ts:102 — executeActorBehavior() is TODO
 // - actors-system.backend.service.ts:228 — registerActorTrigger() is TODO
 //
+// Text sizing uses the shared typography component where it does not conflict
+// with parent component className APIs (Card*,
+// CollapsibleContent, TooltipContent). Those keep raw `text-xs` because
+// they expect a className passthrough, not a child element.
+//
 // Components render actor metadata. Execution monitoring is blocked
 // by backend actor execution implementation.
 //===============================================================
@@ -42,8 +48,6 @@ const ROLE_DISPLAY_NAMES = {
     analyzer: "role_analyzer",
     reviewer: "role_reviewer",
     human_in_the_loop: "role_human_in_the_loop",
-    // The enum value has a typo: "flow_exectution" instead of "flow_execution"
-    flow_exectution: "role_flow_execution",
     flow_execution: "role_flow_execution",
 };
 const MODE_DISPLAY_NAMES = {
@@ -66,7 +70,6 @@ const ROLE_ICONS = {
     analyzer: StandardIconReference.SEARCH,
     reviewer: StandardIconReference.CHECK_CIRCLE,
     human_in_the_loop: StandardIconReference.LOCK,
-    flow_exectution: StandardIconReference.ARROW_RIGHT,
     flow_execution: StandardIconReference.ARROW_RIGHT,
 };
 const MODE_ICONS = {
@@ -81,7 +84,6 @@ const ROLE_VARIANT = {
     analyzer: "secondary",
     reviewer: "outline",
     human_in_the_loop: "destructive",
-    flow_exectution: "outline",
     flow_execution: "outline",
 };
 const STATUS_COLORS = {
@@ -115,13 +117,15 @@ export const AI_ActorTeam = ({ systemName, actors: actorsProp, systemRef, execut
         }
         return counts;
     }, [actors]);
+    if (!isReady)
+        return null;
     if (isLoading) {
         return (_jsxs("div", { className: cn("flex flex-col gap-card", className), "aria-label": tComponent(CT, "loading"), ...props, children: [_jsx(Skeleton, { className: "h-6 w-48" }), _jsxs("div", { className: "grid gap-card sm:grid-cols-2 lg:grid-cols-3", children: [_jsx(Skeleton, { className: "h-40" }), _jsx(Skeleton, { className: "h-40" }), _jsx(Skeleton, { className: "h-40" })] })] }));
     }
     if (actors && actors.length === 0) {
         return (_jsx("div", { className: cn("flex flex-col items-center gap-element py-section text-center text-muted-foreground", className), ...props, children: _jsx("p", { className: "text-sm", children: tComponent(CT, "noActors") }) }));
     }
-    return (_jsxs("div", { className: cn("flex flex-col gap-card", className), ...props, children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-element", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [systemName && (_jsx("h3", { className: "text-sm font-semibold", children: tComponent(CT, "teamTitle", { name: systemName }) })), actors && (_jsx("span", { className: "text-xs text-muted-foreground", children: tComponent(CT, "teamSummary", { count: String(actors.length) }) }))] }), actors && actors.length > 1 && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: viewMode === "grid" ? ButtonVariants_Variant.SECONDARY : ButtonVariants_Variant.GHOST, size: ButtonSize.SM, onClick: () => setViewMode("grid"), "aria-label": tComponent(CT, "gridView"), children: tComponent(CT, "gridView") }), _jsx(Button, { variant: viewMode === "graph" ? ButtonVariants_Variant.SECONDARY : ButtonVariants_Variant.GHOST, size: ButtonSize.SM, onClick: () => setViewMode("graph"), "aria-label": tComponent(CT, "graphView"), children: tComponent(CT, "graphView") })] }))] }), actors && actors.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1", children: Array.from(roleCounts.entries()).map(([role, count]) => (_jsx(Badge, { variant: "outline", className: "text-2xs", children: tComponent(CT, "roleCount", {
+    return (_jsxs("div", { className: cn("flex flex-col gap-card", className), ...props, children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-element", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [systemName && (_jsx("h3", { className: "text-sm font-semibold", children: tComponent(CT, "teamTitle", { name: systemName }) })), actors && (_jsx(Text, { as: "span", size: TextSize.XS, variant: TextVariant.MUTED, children: tComponent(CT, "teamSummary", { count: String(actors.length) }) }))] }), actors && actors.length > 1 && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: viewMode === "grid" ? ButtonVariants_Variant.SECONDARY : ButtonVariants_Variant.GHOST, size: ButtonSize.SM, onClick: () => setViewMode("grid"), "aria-label": tComponent(CT, "gridView"), children: tComponent(CT, "gridView") }), _jsx(Button, { variant: viewMode === "graph" ? ButtonVariants_Variant.SECONDARY : ButtonVariants_Variant.GHOST, size: ButtonSize.SM, onClick: () => setViewMode("graph"), "aria-label": tComponent(CT, "graphView"), children: tComponent(CT, "graphView") })] }))] }), actors && actors.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1", children: Array.from(roleCounts.entries()).map(([role, count]) => (_jsx(Badge, { variant: "outline", className: "text-2xs", children: tComponent(CT, "roleCount", {
                         role: tComponent(CT, (ROLE_DISPLAY_NAMES[role] ?? role)),
                         count: String(count),
                     }) }, role))) })), viewMode === "grid" ? (_jsx("div", { className: "grid gap-card sm:grid-cols-2 lg:grid-cols-3", children: actors
@@ -237,6 +241,8 @@ function ActorGraphNode({ data }) {
 export const AI_ActorCard = ({ actor, actorRef: actorRefProp, displayName: displayNameProp, roleCategory: roleCategoryProp, executionMode: executionModeProp, description: descriptionProp, agentRef: agentRefProp, flowRef: flowRefProp, status = "idle", currentTask, onAgentClick, onFlowClick, className, ...props }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
     const { renderIcon } = useIconRegistry();
+    if (!isReady)
+        return null;
     const actorRef = actor?.ref ?? actorRefProp ?? "";
     const displayName = actor?.displayName ?? displayNameProp ?? actorRef;
     const roleCategory = actor?.roleCategory ?? roleCategoryProp ?? "";
@@ -246,7 +252,7 @@ export const AI_ActorCard = ({ actor, actorRef: actorRefProp, displayName: displ
     const flowRef = actor?.flowRef ?? flowRefProp;
     const statusColor = STATUS_COLORS[status];
     const statusLabel = tComponent(CT, STATUS_LABEL_KEYS[status]);
-    return (_jsxs(Card, { className: cn("flex flex-col", className), ...props, children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(AI_ActorRoleBadge, { role: roleCategory }), _jsx(AI_ActorExecutionModeBadge, { mode: executionMode })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { role: "img", "aria-label": statusLabel, className: cn("inline-block size-2.5 shrink-0 rounded-full", statusColor) }) }), _jsx(TooltipContent, { side: PlacementSide.TOP, className: "text-xs", children: statusLabel })] })] }), _jsx(CardTitle, { className: "text-sm", children: displayName }), _jsx(CardDescription, { className: "text-xs", children: actorRef })] }), _jsxs(CardContent, { className: "flex flex-col gap-element", children: [description && (_jsx("p", { className: "text-xs text-muted-foreground", "aria-label": tComponent(CT, "description"), children: description })), currentTask && (_jsxs("div", { className: "flex items-center gap-1 rounded-sm bg-primary/10 px-2 py-1", "aria-label": tComponent(CT, "currentTask"), children: [renderIcon(StandardIconReference.LOADER_2, {
+    return (_jsxs(Card, { className: cn("flex flex-col", className), ...props, children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(AI_ActorRoleBadge, { role: roleCategory }), _jsx(AI_ActorExecutionModeBadge, { mode: executionMode })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { role: "img", "aria-label": statusLabel, className: cn("inline-block size-2.5 shrink-0 rounded-full", statusColor) }) }), _jsx(TooltipContent, { side: PlacementSide.TOP, className: "text-xs", children: statusLabel })] })] }), _jsx(CardTitle, { className: "text-sm", children: displayName }), _jsx(CardDescription, { className: "text-xs", children: actorRef })] }), _jsxs(CardContent, { className: "flex flex-col gap-element", children: [description && (_jsx(Text, { size: TextSize.XS, variant: TextVariant.MUTED, "aria-label": tComponent(CT, "description"), children: description })), currentTask && (_jsxs("div", { className: "flex items-center gap-1 rounded-sm bg-primary/10 px-2 py-1", "aria-label": tComponent(CT, "currentTask"), children: [renderIcon(StandardIconReference.LOADER_2, {
                                 size: IconSize.SM,
                                 className: "animate-spin text-primary",
                             }), _jsx("span", { className: "truncate text-xs font-medium text-primary", children: currentTask })] })), (agentRef || flowRef) && (_jsxs("div", { className: "flex flex-col gap-1", children: [agentRef && (_jsxs("button", { type: "button", className: "flex items-center gap-1 text-start text-xs text-muted-foreground hover:text-foreground", onClick: () => onAgentClick?.(agentRef), "aria-label": `${tComponent(CT, "linkedAgent")}: ${agentRef}`, children: [renderIcon(StandardIconReference.BRAIN, {
@@ -260,6 +266,8 @@ export const AI_ActorCard = ({ actor, actorRef: actorRefProp, displayName: displ
 export const AI_ActorRoleBadge = ({ role, className, }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
     const { renderIcon } = useIconRegistry();
+    if (!isReady)
+        return null;
     const icon = ROLE_ICONS[role];
     const labelKey = ROLE_DISPLAY_NAMES[role];
     const label = labelKey ? tComponent(CT, labelKey) : role.replace(/_/g, " ");
@@ -268,6 +276,8 @@ export const AI_ActorRoleBadge = ({ role, className, }) => {
 export const AI_ActorExecutionModeBadge = ({ mode, className, }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
     const { renderIcon } = useIconRegistry();
+    if (!isReady)
+        return null;
     const icon = MODE_ICONS[mode];
     const labelKey = MODE_DISPLAY_NAMES[mode];
     const label = labelKey ? tComponent(CT, labelKey) : mode.replace(/_/g, " ");
@@ -278,4 +288,4 @@ export const AI_ActorExecutionModeBadge = ({ mode, className, }) => {
         return badge;
     return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: badge }), _jsx(TooltipContent, { side: PlacementSide.TOP, className: "text-xs", children: description })] }));
 };
-//# sourceMappingURL=actor.js.map
+//# sourceMappingURL=actor.js.map