npm - @wildo-ai/presets-components - Versions diffs - 1.1.3 → 1.1.5 - Mend

@wildo-ai/presets-components 1.1.3 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (707) hide show

package/dist/esm/components/billing/billing-subscription-status.js CHANGED Viewed

@@ -23,7 +23,7 @@ const STATUS_BADGE_CONFIG = {
     paused: { labelKey: 'incompleteBadge', indicatorVariant: IndicatorVariant.NEUTRAL },
 };
 // ── Component ───────────────────────────────────────────────────────
-export function SubscriptionStatus({ status, planName, providerName, currentPeriodEnd, cancelAtPeriodEnd, trialEnd, nextPayment, onManageBilling, isLoading, error, }) {
+export function SubscriptionStatus({ status, planName, providerName, currentPeriodEnd, cancelAtPeriodEnd, trialEnd, nextPayment, onManageBilling, isLoading, error, unavailable, }) {
     const { getRecipe } = useUI();
     const { makeTrComponent, formatDate, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_BILLING_SUBSCRIPTION_STATUS });
     const { renderIcon } = useIconRegistry();
@@ -46,6 +46,8 @@ export function SubscriptionStatus({ status, planName, providerName, currentPeri
     }
     if (!isReady)
         return null;
+    if (unavailable)
+        return _jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: t('unavailable') }) });
     const badgeRecipe = badgeConfig ? getRecipe(UIBehavior.INDICATOR, badgeConfig.indicatorVariant) : null;
     return (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.BASE, children: _jsxs("div", { className: cn("p-card", surfaceRecipe.base), children: [_jsxs("div", { className: "flex items-center justify-between mb-section", children: [_jsx("h3", { className: cn(headingRecipe.base, headingRecipe.sizes?.md), children: t('title') }), badgeConfig && badgeRecipe && (_jsx("span", { className: cn("inline-flex items-center px-2.5 py-0.5", badgeRecipe.base, "rounded-full"), children: t(badgeConfig.labelKey) }))] }), planName && (_jsx("div", { className: "mb-section", children: _jsx("p", { className: cn(headingRecipe.base, "text-2xl"), children: t('planName', { name: planName }) }) })), _jsxs("div", { className: cn("space-y-element mb-section", descriptionRecipe.base), children: [status === 'trialing' && trialEnd && (_jsxs("div", { className: "flex items-center gap-2", children: [renderIcon(StandardIconReference.CALENDAR, { size: IconSize.SM }), _jsxs("span", { children: [t('trialEndsOn'), " ", formatDisplayDate(trialEnd)] })] })), currentPeriodEnd && (_jsxs("div", { className: "flex items-center gap-2", children: [renderIcon(StandardIconReference.CALENDAR, { size: IconSize.SM }), _jsx("span", { children: cancelAtPeriodEnd
                                         ? `${t('endsOn')} ${formatDisplayDate(currentPeriodEnd)}`

package/dist/esm/components/billing/billing-subscription-status.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"billing-subscription-status.js","sourceRoot":"","sources":["../../../../../src/components/billing/billing-subscription-status.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n SubscriptionStatus (Preset)\n \n Displays current subscription state: plan name, status badge,\n * period dates, and a \"Manage billing\" link to the Customer Portal.\n \n Formatting: Uses useI18n() for locale-aware formatting\n * of dates and monetary amounts, respecting user/org regional preferences.\n /\n\nimport React, { useMemo, useCallback } from 'react';\nimport { FrontendComponentType, IndicatorVariant, SurfaceVariant, TypographyVariant, UIBehavior } from '@wildo-ai/presets-components-models';\nimport {\n SubscriptionStatusProps,\n cn,\n useI18n,\n useIconRegistry,\n StandardIconReference,\n IconSize,\n useUI,\n Button,\n ButtonVariants_Variant,\n Skeleton,\n Alert,\n AlertDescription,\n Surface,\n} from '@wildo-ai/saas-frontend-lib';\n\nimport { useFormatMoney } from './billing-format.utils';\n\n// ── Status badge mapping (IndicatorVariant aligned with common enum registry) ──\n\ninterface StatusBadgeConfig {\n labelKey: string;\n indicatorVariant: IndicatorVariant;\n}\n\nconst STATUS_BADGE_CONFIG: Record<string, StatusBadgeConfig> = {\n active: { labelKey: 'activeBadge', indicatorVariant: IndicatorVariant.SUCCESS },\n trialing: { labelKey: 'trialBadge', indicatorVariant: IndicatorVariant.INFO },\n past_due: { labelKey: 'pastDueBadge', indicatorVariant: IndicatorVariant.WARNING },\n canceled: { labelKey: 'cancelledBadge', indicatorVariant: IndicatorVariant.ERROR },\n incomplete: { labelKey: 'incompleteBadge', indicatorVariant: IndicatorVariant.NEUTRAL },\n incomplete_expired: { labelKey: 'incompleteBadge', indicatorVariant: IndicatorVariant.NEUTRAL },\n unpaid: { labelKey: 'pastDueBadge', indicatorVariant: IndicatorVariant.WARNING },\n paused: { labelKey: 'incompleteBadge', indicatorVariant: IndicatorVariant.NEUTRAL },\n};\n\n// ── Component ───────────────────────────────────────────────────────\n\nexport function SubscriptionStatus({\n status,\n planName,\n providerName,\n currentPeriodEnd,\n cancelAtPeriodEnd,\n trialEnd,\n nextPayment,\n onManageBilling,\n isLoading,\n error,\n}: SubscriptionStatusProps): React.JSX.Element \| null {\n const { getRecipe } = useUI();\n const { makeTrComponent, formatDate, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_BILLING_SUBSCRIPTION_STATUS });\n const { renderIcon } = useIconRegistry();\n const formatMoney = useFormatMoney();\n\n const surfaceRecipe = getRecipe(UIBehavior.SURFACE, SurfaceVariant.BASE);\n const headingRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.HEADING);\n const descriptionRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION);\n\n const t = useMemo(\n () => makeTrComponent(FrontendComponentType.LOW_LEVEL_BILLING_SUBSCRIPTION_STATUS),\n [makeTrComponent],\n );\n\n const badgeConfig = status ? STATUS_BADGE_CONFIG[status] ?? STATUS_BADGE_CONFIG.incomplete : null;\n\n const formatDisplayDate = useCallback((date: Date \| null \| undefined): string => {\n if (!date) return '';\n return formatDate(date);\n }, [formatDate]);\n\n if (error) {\n return (\n <Alert variant=\"destructive\">\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n );\n }\n\n if (isLoading) {\n return (\n <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.BASE}>\n <div className={cn(\"p-card\", surfaceRecipe.base)}>\n <div className=\"flex items-center justify-between mb-section\">\n <Skeleton className=\"h-5 w-36\" />\n <Skeleton className=\"h-5 w-16 rounded-full\" />\n </div>\n <Skeleton className=\"h-7 w-48 mb-section\" />\n <div className=\"space-y-element mb-section\">\n <Skeleton className=\"h-4 w-44\" />\n <Skeleton className=\"h-4 w-52\" />\n </div>\n <Skeleton className=\"h-10 w-36 rounded-md\" />\n </div>\n </Surface>\n );\n }\n\n if (!isReady) return null;\n\n const badgeRecipe = badgeConfig ? getRecipe(UIBehavior.INDICATOR, badgeConfig.indicatorVariant) : null;\n\n return (\n <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.BASE}>\n <div className={cn(\"p-card\", surfaceRecipe.base)}>\n {/ Header /}\n <div className=\"flex items-center justify-between mb-section\">\n <h3 className={cn(headingRecipe.base, headingRecipe.sizes?.md)}>{t('title')}</h3>\n {badgeConfig && badgeRecipe && (\n <span className={cn(\"inline-flex items-center px-2.5 py-0.5\", badgeRecipe.base, \"rounded-full\")}>\n {t(badgeConfig.labelKey)}\n </span>\n )}\n </div>\n\n {/ Plan name /}\n {planName && (\n <div className=\"mb-section\">\n <p className={cn(headingRecipe.base, \"text-2xl\")}>\n {t('planName', { name: planName })}\n </p>\n </div>\n )}\n\n {/ Period info /}\n <div className={cn(\"space-y-element mb-section\", descriptionRecipe.base)}>\n {/ Trial info /}\n {status === 'trialing' && trialEnd && (\n <div className=\"flex items-center gap-2\">\n {renderIcon(StandardIconReference.CALENDAR, { size: IconSize.SM })}\n <span>{t('trialEndsOn')} {formatDisplayDate(trialEnd)}</span>\n </div>\n )}\n\n {/ Renewal or end date /}\n {currentPeriodEnd && (\n <div className=\"flex items-center gap-2\">\n {renderIcon(StandardIconReference.CALENDAR, { size: IconSize.SM })}\n <span>\n {cancelAtPeriodEnd\n ? `${t('endsOn')} ${formatDisplayDate(currentPeriodEnd)}`\n : `${t('renewsOn')} ${formatDisplayDate(currentPeriodEnd)}`}\n </span>\n </div>\n )}\n\n {/ Cancel at period end warning /}\n {cancelAtPeriodEnd && (\n <div className=\"flex items-center gap-2 text-warning\">\n {renderIcon(StandardIconReference.WARNING, { size: IconSize.SM })}\n <span>{t('cancelAtPeriodEnd')}</span>\n </div>\n )}\n\n {/ Next payment /}\n {nextPayment && currentPeriodEnd && !cancelAtPeriodEnd && (\n <div className=\"flex items-center gap-2\">\n {renderIcon(StandardIconReference.CREDIT_CARD, { size: IconSize.SM })}\n <span>\n {t('nextPayment', {\n amount: formatMoney(nextPayment),\n currency: nextPayment.currency,\n date: formatDisplayDate(currentPeriodEnd),\n })}\n </span>\n </div>\n )}\n </div>\n\n {/ Manage billing button */}\n {onManageBilling && (\n <Button\n variant={ButtonVariants_Variant.SECONDARY}\n onClick={onManageBilling}\n >\n {renderIcon(StandardIconReference.EXTERNAL_LINK, { size: IconSize.SM })}\n <span>{t('manageBilling')}</span>\n {providerName && (\n <span className={cn(descriptionRecipe.base, \"text-xs\")}>\n {providerName}\n </span>\n )}\n </Button>\n )}\n </div>\n </Surface>\n );\n}\n"]}
1	+ {"version":3,"file":"billing-subscription-status.js","sourceRoot":"","sources":["../../../../../src/components/billing/billing-subscription-status.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n SubscriptionStatus (Preset)\n \n Displays current subscription state: plan name, status badge,\n * period dates, and a \"Manage billing\" link to the Customer Portal.\n \n Formatting: Uses useI18n() for locale-aware formatting\n * of dates and monetary amounts, respecting user/org regional preferences.\n /\n\nimport React, { useMemo, useCallback } from 'react';\nimport { FrontendComponentType, IndicatorVariant, SurfaceVariant, TypographyVariant, UIBehavior } from '@wildo-ai/presets-components-models';\nimport {\n SubscriptionStatusProps,\n cn,\n useI18n,\n useIconRegistry,\n StandardIconReference,\n IconSize,\n useUI,\n Button,\n ButtonVariants_Variant,\n Skeleton,\n Alert,\n AlertDescription,\n Surface,\n} from '@wildo-ai/saas-frontend-lib';\n\nimport { useFormatMoney } from './billing-format.utils';\n\n// ── Status badge mapping (IndicatorVariant aligned with common enum registry) ──\n\ninterface StatusBadgeConfig {\n labelKey: string;\n indicatorVariant: IndicatorVariant;\n}\n\nconst STATUS_BADGE_CONFIG: Record<string, StatusBadgeConfig> = {\n active: { labelKey: 'activeBadge', indicatorVariant: IndicatorVariant.SUCCESS },\n trialing: { labelKey: 'trialBadge', indicatorVariant: IndicatorVariant.INFO },\n past_due: { labelKey: 'pastDueBadge', indicatorVariant: IndicatorVariant.WARNING },\n canceled: { labelKey: 'cancelledBadge', indicatorVariant: IndicatorVariant.ERROR },\n incomplete: { labelKey: 'incompleteBadge', indicatorVariant: IndicatorVariant.NEUTRAL },\n incomplete_expired: { labelKey: 'incompleteBadge', indicatorVariant: IndicatorVariant.NEUTRAL },\n unpaid: { labelKey: 'pastDueBadge', indicatorVariant: IndicatorVariant.WARNING },\n paused: { labelKey: 'incompleteBadge', indicatorVariant: IndicatorVariant.NEUTRAL },\n};\n\n// ── Component ───────────────────────────────────────────────────────\n\nexport function SubscriptionStatus({\n status,\n planName,\n providerName,\n currentPeriodEnd,\n cancelAtPeriodEnd,\n trialEnd,\n nextPayment,\n onManageBilling,\n isLoading,\n error,\n unavailable,\n}: SubscriptionStatusProps): React.JSX.Element \| null {\n const { getRecipe } = useUI();\n const { makeTrComponent, formatDate, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_BILLING_SUBSCRIPTION_STATUS });\n const { renderIcon } = useIconRegistry();\n const formatMoney = useFormatMoney();\n\n const surfaceRecipe = getRecipe(UIBehavior.SURFACE, SurfaceVariant.BASE);\n const headingRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.HEADING);\n const descriptionRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION);\n\n const t = useMemo(\n () => makeTrComponent(FrontendComponentType.LOW_LEVEL_BILLING_SUBSCRIPTION_STATUS),\n [makeTrComponent],\n );\n\n const badgeConfig = status ? STATUS_BADGE_CONFIG[status] ?? STATUS_BADGE_CONFIG.incomplete : null;\n\n const formatDisplayDate = useCallback((date: Date \| null \| undefined): string => {\n if (!date) return '';\n return formatDate(date);\n }, [formatDate]);\n\n if (error) {\n return (\n <Alert variant=\"destructive\">\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n );\n }\n\n if (isLoading) {\n return (\n <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.BASE}>\n <div className={cn(\"p-card\", surfaceRecipe.base)}>\n <div className=\"flex items-center justify-between mb-section\">\n <Skeleton className=\"h-5 w-36\" />\n <Skeleton className=\"h-5 w-16 rounded-full\" />\n </div>\n <Skeleton className=\"h-7 w-48 mb-section\" />\n <div className=\"space-y-element mb-section\">\n <Skeleton className=\"h-4 w-44\" />\n <Skeleton className=\"h-4 w-52\" />\n </div>\n <Skeleton className=\"h-10 w-36 rounded-md\" />\n </div>\n </Surface>\n );\n }\n\n if (!isReady) return null;\n\n if (unavailable) return <Alert variant=\"destructive\"><AlertDescription>{t('unavailable')}</AlertDescription></Alert>;\n\n const badgeRecipe = badgeConfig ? getRecipe(UIBehavior.INDICATOR, badgeConfig.indicatorVariant) : null;\n\n return (\n <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.BASE}>\n <div className={cn(\"p-card\", surfaceRecipe.base)}>\n {/ Header /}\n <div className=\"flex items-center justify-between mb-section\">\n <h3 className={cn(headingRecipe.base, headingRecipe.sizes?.md)}>{t('title')}</h3>\n {badgeConfig && badgeRecipe && (\n <span className={cn(\"inline-flex items-center px-2.5 py-0.5\", badgeRecipe.base, \"rounded-full\")}>\n {t(badgeConfig.labelKey)}\n </span>\n )}\n </div>\n\n {/ Plan name /}\n {planName && (\n <div className=\"mb-section\">\n <p className={cn(headingRecipe.base, \"text-2xl\")}>\n {t('planName', { name: planName })}\n </p>\n </div>\n )}\n\n {/ Period info /}\n <div className={cn(\"space-y-element mb-section\", descriptionRecipe.base)}>\n {/ Trial info /}\n {status === 'trialing' && trialEnd && (\n <div className=\"flex items-center gap-2\">\n {renderIcon(StandardIconReference.CALENDAR, { size: IconSize.SM })}\n <span>{t('trialEndsOn')} {formatDisplayDate(trialEnd)}</span>\n </div>\n )}\n\n {/ Renewal or end date /}\n {currentPeriodEnd && (\n <div className=\"flex items-center gap-2\">\n {renderIcon(StandardIconReference.CALENDAR, { size: IconSize.SM })}\n <span>\n {cancelAtPeriodEnd\n ? `${t('endsOn')} ${formatDisplayDate(currentPeriodEnd)}`\n : `${t('renewsOn')} ${formatDisplayDate(currentPeriodEnd)}`}\n </span>\n </div>\n )}\n\n {/ Cancel at period end warning /}\n {cancelAtPeriodEnd && (\n <div className=\"flex items-center gap-2 text-warning\">\n {renderIcon(StandardIconReference.WARNING, { size: IconSize.SM })}\n <span>{t('cancelAtPeriodEnd')}</span>\n </div>\n )}\n\n {/ Next payment /}\n {nextPayment && currentPeriodEnd && !cancelAtPeriodEnd && (\n <div className=\"flex items-center gap-2\">\n {renderIcon(StandardIconReference.CREDIT_CARD, { size: IconSize.SM })}\n <span>\n {t('nextPayment', {\n amount: formatMoney(nextPayment),\n currency: nextPayment.currency,\n date: formatDisplayDate(currentPeriodEnd),\n })}\n </span>\n </div>\n )}\n </div>\n\n {/ Manage billing button */}\n {onManageBilling && (\n <Button\n variant={ButtonVariants_Variant.SECONDARY}\n onClick={onManageBilling}\n >\n {renderIcon(StandardIconReference.EXTERNAL_LINK, { size: IconSize.SM })}\n <span>{t('manageBilling')}</span>\n {providerName && (\n <span className={cn(descriptionRecipe.base, \"text-xs\")}>\n {providerName}\n </span>\n )}\n </Button>\n )}\n </div>\n </Surface>\n );\n}\n"]}

package/dist/esm/components/billing/billing-subscription-status.labels.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"billing-subscription-status.labels.d.ts","sourceRoot":"","sources":["~~../../../../~~src/components/billing/billing-subscription-status.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,uCAAuC,EAAE,mBAAmB,~~EAgCxE~~,CAAC"}
1	+ {"version":3,"file":"billing-subscription-status.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/billing/billing-subscription-status.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,uCAAuC,EAAE,mBAAmB,EAiCxE,CAAC"}

package/dist/esm/components/billing/billing-subscription-status.labels.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { FrontendComponentType, LabelKind, registerComponentLabels, } from '@wil
 // purpose / kind / variable meaning. Statically scanned by the dev companion;
 // NOT imported at runtime, so it never ships in the bundle.
 export const LowLevelBillingSubscriptionStatusLabels = [
+    { ref: 'unavailable', kind: LabelKind.EMPTY_STATE, purpose: 'Billing information is temporarily unavailable; this is a failed read, not an empty account or a free plan' },
     { ref: 'title', kind: LabelKind.HEADING, purpose: 'Heading for the subscription status panel' },
     { ref: 'activeBadge', kind: LabelKind.LABEL, purpose: 'Status badge for a subscription in good standing' },
     { ref: 'trialBadge', kind: LabelKind.LABEL, purpose: 'Status badge for a subscription in its trial period' },

package/dist/esm/components/billing/billing-subscription-status.labels.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"billing-subscription-status.labels.js","sourceRoot":"","sources":["../../../../../src/components/billing/billing-subscription-status.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,SAAS,EAET,uBAAuB,GACxB,MAAM,qCAAqC,CAAC;AAE7C,4EAA4E;AAC5E,8EAA8E;AAC9E,4DAA4D;AAE5D,MAAM,CAAC,MAAM,uCAAuC,GAA0B;IAC5E,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,2CAA2C,EAAE;IAC/F,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,kDAAkD,EAAE;IAC1G,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,qDAAqD,EAAE;IAC5G,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,yDAAyD,EAAE;IAClH,EAAE,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,yDAAyD,EAAE;IACpH,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,2DAA2D,EAAE;IACvH,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,uCAAuC,EAAE;IAC5F,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,gDAAgD,EAAE;IACnG,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,yCAAyC,EAAE;IACjG,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,OAAO,EAAE,iEAAiE,EAAE;IAC5H;QACE,GAAG,EAAE,mBAAmB;QACxB,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,sEAAsE;KAChF;IACD;QACE,GAAG,EAAE,UAAU;QACf,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,6DAA6D;QACtE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,wBAAwB,EAAE,CAAC;KAC7D;IACD;QACE,GAAG,EAAE,aAAa;QAClB,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,8DAA8D;QACvE,MAAM,EAAE;YACN,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,qBAAqB,EAAE;YACjD,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,kCAAkC,EAAE;YAChE,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE;SAC7D;KACF;CACF,CAAC;AACF,uBAAuB,CAAC,qBAAqB,CAAC,qCAAqC,EAAE,uCAAuC,CAAC,CAAC","sourcesContent":["import {\n FrontendComponentType,\n LabelKind,\n type LabellingUnitaryDef,\n registerComponentLabels,\n} from '@wildo-ai/presets-components-models';\n\n// Companion-only label metadata for this component: keys + params + per-key\n// purpose / kind / variable meaning. Statically scanned by the dev companion;\n// NOT imported at runtime, so it never ships in the bundle.\n\nexport const LowLevelBillingSubscriptionStatusLabels: LabellingUnitaryDef[] = [\n { ref: 'title', kind: LabelKind.HEADING, purpose: 'Heading for the subscription status panel' },\n { ref: 'activeBadge', kind: LabelKind.LABEL, purpose: 'Status badge for a subscription in good standing' },\n { ref: 'trialBadge', kind: LabelKind.LABEL, purpose: 'Status badge for a subscription in its trial period' },\n { ref: 'pastDueBadge', kind: LabelKind.LABEL, purpose: 'Status badge for a subscription with an overdue payment' },\n { ref: 'cancelledBadge', kind: LabelKind.LABEL, purpose: 'Status badge for a subscription that has been cancelled' },\n { ref: 'incompleteBadge', kind: LabelKind.LABEL, purpose: 'Status badge for a subscription whose setup is incomplete' },\n { ref: 'renewsOn', kind: LabelKind.LABEL, purpose: 'Label preceding the next renewal date' },\n { ref: 'endsOn', kind: LabelKind.LABEL, purpose: 'Label preceding the date the subscription ends' },\n { ref: 'trialEndsOn', kind: LabelKind.LABEL, purpose: 'Label preceding the date the trial ends' },\n { ref: 'manageBilling', kind: LabelKind.BUTTON, purpose: 'Action that opens the billing portal to manage the subscription' },\n {\n ref: 'cancelAtPeriodEnd',\n kind: LabelKind.LABEL,\n purpose: 'Notice that the subscription will not renew after the current period',\n },\n {\n ref: 'planName',\n kind: LabelKind.LABEL,\n purpose: 'Displays the name of the customer-current subscription plan',\n params: [{ key: 'name', meaning: 'subscription plan name' }],\n },\n {\n ref: 'nextPayment',\n kind: LabelKind.LABEL,\n purpose: 'Summarises the amount and date of the next scheduled payment',\n params: [\n { key: 'amount', meaning: 'next payment amount' },\n { key: 'currency', meaning: 'ISO currency code of the payment' },\n { key: 'date', meaning: 'date the next payment is charged' },\n ],\n },\n];\nregisterComponentLabels(FrontendComponentType.LOW_LEVEL_BILLING_SUBSCRIPTION_STATUS, LowLevelBillingSubscriptionStatusLabels);\n"]}
1	+ {"version":3,"file":"billing-subscription-status.labels.js","sourceRoot":"","sources":["../../../../../src/components/billing/billing-subscription-status.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,SAAS,EAET,uBAAuB,GACxB,MAAM,qCAAqC,CAAC;AAE7C,4EAA4E;AAC5E,8EAA8E;AAC9E,4DAA4D;AAE5D,MAAM,CAAC,MAAM,uCAAuC,GAA0B;IAC5E,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,4GAA4G,EAAE;IAC1K,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,2CAA2C,EAAE;IAC/F,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,kDAAkD,EAAE;IAC1G,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,qDAAqD,EAAE;IAC5G,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,yDAAyD,EAAE;IAClH,EAAE,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,yDAAyD,EAAE;IACpH,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,2DAA2D,EAAE;IACvH,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,uCAAuC,EAAE;IAC5F,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,gDAAgD,EAAE;IACnG,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,yCAAyC,EAAE;IACjG,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,OAAO,EAAE,iEAAiE,EAAE;IAC5H;QACE,GAAG,EAAE,mBAAmB;QACxB,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,sEAAsE;KAChF;IACD;QACE,GAAG,EAAE,UAAU;QACf,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,6DAA6D;QACtE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,wBAAwB,EAAE,CAAC;KAC7D;IACD;QACE,GAAG,EAAE,aAAa;QAClB,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,8DAA8D;QACvE,MAAM,EAAE;YACN,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,qBAAqB,EAAE;YACjD,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,kCAAkC,EAAE;YAChE,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE;SAC7D;KACF;CACF,CAAC;AACF,uBAAuB,CAAC,qBAAqB,CAAC,qCAAqC,EAAE,uCAAuC,CAAC,CAAC","sourcesContent":["import {\n FrontendComponentType,\n LabelKind,\n type LabellingUnitaryDef,\n registerComponentLabels,\n} from '@wildo-ai/presets-components-models';\n\n// Companion-only label metadata for this component: keys + params + per-key\n// purpose / kind / variable meaning. Statically scanned by the dev companion;\n// NOT imported at runtime, so it never ships in the bundle.\n\nexport const LowLevelBillingSubscriptionStatusLabels: LabellingUnitaryDef[] = [\n { ref: 'unavailable', kind: LabelKind.EMPTY_STATE, purpose: 'Billing information is temporarily unavailable; this is a failed read, not an empty account or a free plan' },\n { ref: 'title', kind: LabelKind.HEADING, purpose: 'Heading for the subscription status panel' },\n { ref: 'activeBadge', kind: LabelKind.LABEL, purpose: 'Status badge for a subscription in good standing' },\n { ref: 'trialBadge', kind: LabelKind.LABEL, purpose: 'Status badge for a subscription in its trial period' },\n { ref: 'pastDueBadge', kind: LabelKind.LABEL, purpose: 'Status badge for a subscription with an overdue payment' },\n { ref: 'cancelledBadge', kind: LabelKind.LABEL, purpose: 'Status badge for a subscription that has been cancelled' },\n { ref: 'incompleteBadge', kind: LabelKind.LABEL, purpose: 'Status badge for a subscription whose setup is incomplete' },\n { ref: 'renewsOn', kind: LabelKind.LABEL, purpose: 'Label preceding the next renewal date' },\n { ref: 'endsOn', kind: LabelKind.LABEL, purpose: 'Label preceding the date the subscription ends' },\n { ref: 'trialEndsOn', kind: LabelKind.LABEL, purpose: 'Label preceding the date the trial ends' },\n { ref: 'manageBilling', kind: LabelKind.BUTTON, purpose: 'Action that opens the billing portal to manage the subscription' },\n {\n ref: 'cancelAtPeriodEnd',\n kind: LabelKind.LABEL,\n purpose: 'Notice that the subscription will not renew after the current period',\n },\n {\n ref: 'planName',\n kind: LabelKind.LABEL,\n purpose: 'Displays the name of the customer-current subscription plan',\n params: [{ key: 'name', meaning: 'subscription plan name' }],\n },\n {\n ref: 'nextPayment',\n kind: LabelKind.LABEL,\n purpose: 'Summarises the amount and date of the next scheduled payment',\n params: [\n { key: 'amount', meaning: 'next payment amount' },\n { key: 'currency', meaning: 'ISO currency code of the payment' },\n { key: 'date', meaning: 'date the next payment is charged' },\n ],\n },\n];\nregisterComponentLabels(FrontendComponentType.LOW_LEVEL_BILLING_SUBSCRIPTION_STATUS, LowLevelBillingSubscriptionStatusLabels);\n"]}

package/dist/esm/components/billing/billing-usage-dashboard.d.ts CHANGED Viewed

@@ -9,5 +9,5 @@
  */
 import React from 'react';
 import { UsageDashboardProps } from '@wildo-ai/saas-frontend-lib';
-export declare function UsageDashboard({ products, creditPools, onTopUp, isLoading, error, }: UsageDashboardProps): React.JSX.Element | null;
+export declare function UsageDashboard({ products, creditPools, onTopUp, isLoading, error, usageUnavailable, creditPoolsUnavailable, }: UsageDashboardProps): React.JSX.Element | null;
 //# sourceMappingURL=billing-usage-dashboard.d.ts.map

package/dist/esm/components/billing/billing-usage-dashboard.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"billing-usage-dashboard.d.ts","sourceRoot":"","sources":["~~../../../../~~src/components/billing/billing-usage-dashboard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAeL,mBAAmB,EACpB,MAAM,6BAA6B,CAAC;AASrC,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,KAAK,~~GACN~~,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,~~CAuLhD~~"}
1	+ {"version":3,"file":"billing-usage-dashboard.d.ts","sourceRoot":"","sources":["../../../../../src/components/billing/billing-usage-dashboard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAeL,mBAAmB,EACpB,MAAM,6BAA6B,CAAC;AASrC,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,KAAK,EACL,gBAAgB,EAChB,sBAAsB,GACvB,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAyLhD"}

package/dist/esm/components/billing/billing-usage-dashboard.js CHANGED Viewed

@@ -16,7 +16,7 @@ import { cn, useI18n, useIconRegistry, StandardIconReference, IconSize, useUI, B
 // `billing-usage-dashboard.labels.ts` — statically scanned by the dev companion,
 // never imported at runtime (so it stays out of the browser bundle).
 // ── Component ───────────────────────────────────────────────────────
-export function UsageDashboard({ products, creditPools, onTopUp, isLoading, error, }) {
+export function UsageDashboard({ products, creditPools, onTopUp, isLoading, error, usageUnavailable, creditPoolsUnavailable, }) {
     const { getRecipe } = useUI();
     const { makeTrComponent, formatNumber, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_BILLING_USAGE_DASHBOARD });
     const { renderIcon } = useIconRegistry();
@@ -32,8 +32,8 @@ export function UsageDashboard({ products, creditPools, onTopUp, isLoading, erro
     }
     if (!isReady)
         return null;
-    const isEmpty = products.length === 0 && creditPools.length === 0;
-    return (_jsxs("div", { className: "space-y-section", children: [_jsx("h3", { className: cn(headingRecipe.base, headingRecipe.sizes?.md), children: t('title') }), isEmpty && (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.BASE, children: _jsx("div", { className: cn("p-card text-center", surfaceRecipe.base), children: _jsx("p", { className: descriptionRecipe.base, children: t('noUsageData') }) }) })), products.length > 0 && (_jsxs("div", { className: "space-y-card", children: [_jsx("p", { className: cn(descriptionRecipe.base, "font-medium"), children: t('currentPeriod') }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-card", children: products.map(product => {
+    const isEmpty = !usageUnavailable && !creditPoolsUnavailable && products.length === 0 && creditPools.length === 0;
+    return (_jsxs("div", { className: "space-y-section", children: [_jsx("h3", { className: cn(headingRecipe.base, headingRecipe.sizes?.md), children: t('title') }), usageUnavailable && _jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: t('usageUnavailable') }) }), creditPoolsUnavailable && _jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: t('creditPoolsUnavailable') }) }), isEmpty && (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.BASE, children: _jsx("div", { className: cn("p-card text-center", surfaceRecipe.base), children: _jsx("p", { className: descriptionRecipe.base, children: t('noUsageData') }) }) })), !usageUnavailable && products.length > 0 && (_jsxs("div", { className: "space-y-card", children: [_jsx("p", { className: cn(descriptionRecipe.base, "font-medium"), children: t('currentPeriod') }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-card", children: products.map(product => {
                             const usagePercentage = product.limit
                                 ? Math.min(100, Math.round((product.currentPeriodUsage / product.limit) * 100))
                                 : null;
@@ -43,7 +43,7 @@ export function UsageDashboard({ products, creditPools, onTopUp, isLoading, erro
                             return (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.BASE, children: _jsxs("div", { className: cn("p-card", surfaceRecipe.base), children: [_jsxs("div", { className: "flex items-center justify-between mb-element", children: [_jsx("h4", { className: cn(descriptionRecipe.base, "font-medium text-foreground"), children: product.productName }), trend !== null && (_jsx("span", { className: cn("text-xs font-medium", trend >= 0 ? 'text-success' : 'text-destructive'), children: t('trendVsPrevious', { percentage: `${trend >= 0 ? '+' : ''}${trend}%` }) }))] }), _jsx("div", { className: cn(headingRecipe.base, "text-2xl mb-element"), children: product.limit
                                                 ? t('usageOf', { current: formatNumber(product.currentPeriodUsage), limit: formatNumber(product.limit) })
                                                 : formatNumber(product.currentPeriodUsage) }), usagePercentage !== null && (_jsx("div", { className: "h-2 bg-muted-foreground/20 rounded-full overflow-hidden", role: "progressbar", "aria-valuenow": product.currentPeriodUsage, "aria-valuemin": 0, "aria-valuemax": product.limit ?? 100, "aria-label": t('productUsageAriaLabel', { product: product.productName, current: formatNumber(product.currentPeriodUsage), limit: formatNumber(product.limit ?? 0) }), children: _jsx("div", { className: cn("h-full rounded-full duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] transition-[width] motion-reduce:transition-none", usagePercentage >= 100 ? 'bg-destructive' : usagePercentage >= 80 ? 'bg-warning' : 'bg-primary'), style: { width: `${usagePercentage}%` } }) }))] }) }, product.productKey));
-                        }) })] })), creditPools.length > 0 && (_jsxs("div", { className: "space-y-card", children: [_jsx("p", { className: cn(descriptionRecipe.base, "font-medium"), children: t('creditsTitle') }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-card", children: creditPools.map(pool => {
+                        }) })] })), !creditPoolsUnavailable && creditPools.length > 0 && (_jsxs("div", { className: "space-y-card", children: [_jsx("p", { className: cn(descriptionRecipe.base, "font-medium"), children: t('creditsTitle') }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-card", children: creditPools.map(pool => {
                             const usagePercentage = pool.totalPurchased > 0
                                 ? Math.round((pool.totalConsumed / pool.totalPurchased) * 100)
                                 : 0;

package/dist/esm/components/billing/billing-usage-dashboard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"billing-usage-dashboard.js","sourceRoot":"","sources":["../../../../../src/components/billing/billing-usage-dashboard.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n UsageDashboard (Preset)\n \n Displays usage/consumption overview for metered products and credit pool balances.\n * Reads from UsageSummary data provided by BillingContext.\n \n Formatting: Uses useI18n() for locale-aware formatting\n * of numbers, respecting user/org regional preferences.\n /\n\nimport React, { useMemo } from 'react';\nimport { ButtonSize, FrontendComponentType, SurfaceVariant, TypographyVariant, UIBehavior } from '@wildo-ai/presets-components-models';\nimport {\n cn,\n useI18n,\n useIconRegistry,\n StandardIconReference,\n IconSize,\n useUI,\n Button,\n ButtonVariants_Variant,\n Skeleton,\n Alert,\n AlertDescription,\n Surface,\n UsageDashboardCreditPool,\n UsageDashboardProduct,\n UsageDashboardProps,\n} from '@wildo-ai/saas-frontend-lib';\n\n// The label contract for this component (keys + params + per-key purpose / kind\n// / variable meaning) lives in the co-located, companion-only\n// `billing-usage-dashboard.labels.ts` — statically scanned by the dev companion,\n// never imported at runtime (so it stays out of the browser bundle).\n\n// ── Component ───────────────────────────────────────────────────────\n\nexport function UsageDashboard({\n products,\n creditPools,\n onTopUp,\n isLoading,\n error,\n}: UsageDashboardProps): React.JSX.Element \| null {\n const { getRecipe } = useUI();\n const { makeTrComponent, formatNumber, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_BILLING_USAGE_DASHBOARD });\n const { renderIcon } = useIconRegistry();\n\n const surfaceRecipe = getRecipe(UIBehavior.SURFACE, SurfaceVariant.BASE);\n const headingRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.HEADING);\n const descriptionRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION);\n\n const t = useMemo(\n () => makeTrComponent(FrontendComponentType.LOW_LEVEL_BILLING_USAGE_DASHBOARD),\n [makeTrComponent],\n );\n\n if (error) {\n return (\n <Alert variant=\"destructive\">\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n );\n }\n\n if (isLoading) {\n return (\n <div className=\"space-y-section\">\n <Skeleton className=\"h-5 w-36\" />\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-card\">\n {[0, 1].map(i => (\n <Surface key={i} asChild emitPolicyVars={false} variant={SurfaceVariant.BASE}>\n <div className={cn(\"p-card\", surfaceRecipe.base)}>\n <Skeleton className=\"h-4 w-28 mb-element\" />\n <Skeleton className=\"h-7 w-20 mb-element\" />\n <Skeleton className=\"h-2 w-full rounded-full\" />\n </div>\n </Surface>\n ))}\n </div>\n </div>\n );\n }\n\n if (!isReady) return null;\n\n const isEmpty = products.length === 0 && creditPools.length === 0;\n\n return (\n <div className=\"space-y-section\">\n <h3 className={cn(headingRecipe.base, headingRecipe.sizes?.md)}>{t('title')}</h3>\n\n {isEmpty && (\n <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.BASE}>\n <div className={cn(\"p-card text-center\", surfaceRecipe.base)}>\n <p className={descriptionRecipe.base}>{t('noUsageData')}</p>\n </div>\n </Surface>\n )}\n\n {/ Metered product usage /}\n {products.length > 0 && (\n <div className=\"space-y-card\">\n <p className={cn(descriptionRecipe.base, \"font-medium\")}>{t('currentPeriod')}</p>\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-card\">\n {products.map(product => {\n const usagePercentage = product.limit\n ? Math.min(100, Math.round((product.currentPeriodUsage / product.limit) 100))\n : null;\n const trend = product.previousPeriodUsage != null && product.previousPeriodUsage > 0\n ? Math.round(((product.currentPeriodUsage - product.previousPeriodUsage) / product.previousPeriodUsage) * 100)\n : null;\n\n return (\n <Surface key={product.productKey} asChild emitPolicyVars={false} variant={SurfaceVariant.BASE}>\n <div className={cn(\"p-card\", surfaceRecipe.base)}>\n <div className=\"flex items-center justify-between mb-element\">\n <h4 className={cn(descriptionRecipe.base, \"font-medium text-foreground\")}>{product.productName}</h4>\n {trend !== null && (\n <span className={cn(\"text-xs font-medium\", trend >= 0 ? 'text-success' : 'text-destructive')}>\n {t('trendVsPrevious', { percentage: `${trend >= 0 ? '+' : ''}${trend}%` })}\n </span>\n )}\n </div>\n\n <div className={cn(headingRecipe.base, \"text-2xl mb-element\")}>\n {product.limit\n ? t('usageOf', { current: formatNumber(product.currentPeriodUsage), limit: formatNumber(product.limit) })\n : formatNumber(product.currentPeriodUsage)}\n </div>\n\n {usagePercentage !== null && (\n <div\n className=\"h-2 bg-muted-foreground/20 rounded-full overflow-hidden\"\n role=\"progressbar\"\n aria-valuenow={product.currentPeriodUsage}\n aria-valuemin={0}\n aria-valuemax={product.limit ?? 100}\n aria-label={t('productUsageAriaLabel', { product: product.productName, current: formatNumber(product.currentPeriodUsage), limit: formatNumber(product.limit ?? 0) })}\n >\n <div\n className={cn(\n \"h-full rounded-full duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] transition-[width] motion-reduce:transition-none\",\n usagePercentage >= 100 ? 'bg-destructive' : usagePercentage >= 80 ? 'bg-warning' : 'bg-primary',\n )}\n style={{ width: `${usagePercentage}%` }}\n />\n </div>\n )}\n </div>\n </Surface>\n );\n })}\n </div>\n </div>\n )}\n\n {/* Credit pools /}\n {creditPools.length > 0 && (\n <div className=\"space-y-card\">\n <p className={cn(descriptionRecipe.base, \"font-medium\")}>{t('creditsTitle')}</p>\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-card\">\n {creditPools.map(pool => {\n const usagePercentage = pool.totalPurchased > 0\n ? Math.round((pool.totalConsumed / pool.totalPurchased) 100)\n : 0;\n\n return (\n <Surface key={pool.poolKey} asChild emitPolicyVars={false} variant={SurfaceVariant.BASE}>\n <div className={cn(\"p-card\", surfaceRecipe.base)}>\n <h4 className={cn(descriptionRecipe.base, \"font-medium text-foreground mb-section\")}>{pool.poolName}</h4>\n\n <div className=\"space-y-element\">\n <div className={cn(\"flex justify-between\", descriptionRecipe.base)}>\n <span className={descriptionRecipe.base}>{t('availableCredits')}</span>\n <span className={cn(\"font-semibold text-foreground\")}>{formatNumber(pool.available)}</span>\n </div>\n <div className={cn(\"flex justify-between\", descriptionRecipe.base)}>\n <span className={descriptionRecipe.base}>{t('totalPurchased')}</span>\n <span className=\"text-foreground\">{formatNumber(pool.totalPurchased)}</span>\n </div>\n <div className={cn(\"flex justify-between\", descriptionRecipe.base)}>\n <span className={descriptionRecipe.base}>{t('totalConsumed')}</span>\n <span className=\"text-foreground\">{formatNumber(pool.totalConsumed)}</span>\n </div>\n </div>\n\n {pool.totalPurchased > 0 && (\n <div\n className=\"mt-element h-2 bg-muted-foreground/20 rounded-full overflow-hidden\"\n role=\"progressbar\"\n aria-valuenow={pool.totalConsumed}\n aria-valuemin={0}\n aria-valuemax={pool.totalPurchased}\n aria-label={t('creditPoolAriaLabel', { pool: pool.poolName, consumed: formatNumber(pool.totalConsumed), total: formatNumber(pool.totalPurchased) })}\n >\n <div\n className={cn(\n \"h-full rounded-full duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] transition-[width] motion-reduce:transition-none\",\n usagePercentage >= 90 ? 'bg-destructive' : usagePercentage >= 70 ? 'bg-warning' : 'bg-primary',\n )}\n style={{ width: `${usagePercentage}%` }}\n />\n </div>\n )}\n\n {onTopUp && (\n <Button\n variant={ButtonVariants_Variant.SECONDARY}\n size={ButtonSize.SM}\n className=\"mt-section w-full\"\n onClick={() => onTopUp(pool.poolKey)}\n >\n {renderIcon(StandardIconReference.PLUS, { size: IconSize.SM })}\n {t('topUpCredits')}\n </Button>\n )}\n </div>\n </Surface>\n );\n })}\n </div>\n </div>\n )}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"billing-usage-dashboard.js","sourceRoot":"","sources":["../../../../../src/components/billing/billing-usage-dashboard.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n UsageDashboard (Preset)\n \n Displays usage/consumption overview for metered products and credit pool balances.\n * Reads from UsageSummary data provided by BillingContext.\n \n Formatting: Uses useI18n() for locale-aware formatting\n * of numbers, respecting user/org regional preferences.\n /\n\nimport React, { useMemo } from 'react';\nimport { ButtonSize, FrontendComponentType, SurfaceVariant, TypographyVariant, UIBehavior } from '@wildo-ai/presets-components-models';\nimport {\n cn,\n useI18n,\n useIconRegistry,\n StandardIconReference,\n IconSize,\n useUI,\n Button,\n ButtonVariants_Variant,\n Skeleton,\n Alert,\n AlertDescription,\n Surface,\n UsageDashboardCreditPool,\n UsageDashboardProduct,\n UsageDashboardProps,\n} from '@wildo-ai/saas-frontend-lib';\n\n// The label contract for this component (keys + params + per-key purpose / kind\n// / variable meaning) lives in the co-located, companion-only\n// `billing-usage-dashboard.labels.ts` — statically scanned by the dev companion,\n// never imported at runtime (so it stays out of the browser bundle).\n\n// ── Component ───────────────────────────────────────────────────────\n\nexport function UsageDashboard({\n products,\n creditPools,\n onTopUp,\n isLoading,\n error,\n usageUnavailable,\n creditPoolsUnavailable,\n}: UsageDashboardProps): React.JSX.Element \| null {\n const { getRecipe } = useUI();\n const { makeTrComponent, formatNumber, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_BILLING_USAGE_DASHBOARD });\n const { renderIcon } = useIconRegistry();\n\n const surfaceRecipe = getRecipe(UIBehavior.SURFACE, SurfaceVariant.BASE);\n const headingRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.HEADING);\n const descriptionRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION);\n\n const t = useMemo(\n () => makeTrComponent(FrontendComponentType.LOW_LEVEL_BILLING_USAGE_DASHBOARD),\n [makeTrComponent],\n );\n\n if (error) {\n return (\n <Alert variant=\"destructive\">\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n );\n }\n\n if (isLoading) {\n return (\n <div className=\"space-y-section\">\n <Skeleton className=\"h-5 w-36\" />\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-card\">\n {[0, 1].map(i => (\n <Surface key={i} asChild emitPolicyVars={false} variant={SurfaceVariant.BASE}>\n <div className={cn(\"p-card\", surfaceRecipe.base)}>\n <Skeleton className=\"h-4 w-28 mb-element\" />\n <Skeleton className=\"h-7 w-20 mb-element\" />\n <Skeleton className=\"h-2 w-full rounded-full\" />\n </div>\n </Surface>\n ))}\n </div>\n </div>\n );\n }\n\n if (!isReady) return null;\n\n const isEmpty = !usageUnavailable && !creditPoolsUnavailable && products.length === 0 && creditPools.length === 0;\n\n return (\n <div className=\"space-y-section\">\n <h3 className={cn(headingRecipe.base, headingRecipe.sizes?.md)}>{t('title')}</h3>\n\n {usageUnavailable && <Alert variant=\"destructive\"><AlertDescription>{t('usageUnavailable')}</AlertDescription></Alert>}\n {creditPoolsUnavailable && <Alert variant=\"destructive\"><AlertDescription>{t('creditPoolsUnavailable')}</AlertDescription></Alert>}\n {isEmpty && (\n <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.BASE}>\n <div className={cn(\"p-card text-center\", surfaceRecipe.base)}>\n <p className={descriptionRecipe.base}>{t('noUsageData')}</p>\n </div>\n </Surface>\n )}\n\n {/ Metered product usage /}\n {!usageUnavailable && products.length > 0 && (\n <div className=\"space-y-card\">\n <p className={cn(descriptionRecipe.base, \"font-medium\")}>{t('currentPeriod')}</p>\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-card\">\n {products.map(product => {\n const usagePercentage = product.limit\n ? Math.min(100, Math.round((product.currentPeriodUsage / product.limit) 100))\n : null;\n const trend = product.previousPeriodUsage != null && product.previousPeriodUsage > 0\n ? Math.round(((product.currentPeriodUsage - product.previousPeriodUsage) / product.previousPeriodUsage) * 100)\n : null;\n\n return (\n <Surface key={product.productKey} asChild emitPolicyVars={false} variant={SurfaceVariant.BASE}>\n <div className={cn(\"p-card\", surfaceRecipe.base)}>\n <div className=\"flex items-center justify-between mb-element\">\n <h4 className={cn(descriptionRecipe.base, \"font-medium text-foreground\")}>{product.productName}</h4>\n {trend !== null && (\n <span className={cn(\"text-xs font-medium\", trend >= 0 ? 'text-success' : 'text-destructive')}>\n {t('trendVsPrevious', { percentage: `${trend >= 0 ? '+' : ''}${trend}%` })}\n </span>\n )}\n </div>\n\n <div className={cn(headingRecipe.base, \"text-2xl mb-element\")}>\n {product.limit\n ? t('usageOf', { current: formatNumber(product.currentPeriodUsage), limit: formatNumber(product.limit) })\n : formatNumber(product.currentPeriodUsage)}\n </div>\n\n {usagePercentage !== null && (\n <div\n className=\"h-2 bg-muted-foreground/20 rounded-full overflow-hidden\"\n role=\"progressbar\"\n aria-valuenow={product.currentPeriodUsage}\n aria-valuemin={0}\n aria-valuemax={product.limit ?? 100}\n aria-label={t('productUsageAriaLabel', { product: product.productName, current: formatNumber(product.currentPeriodUsage), limit: formatNumber(product.limit ?? 0) })}\n >\n <div\n className={cn(\n \"h-full rounded-full duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] transition-[width] motion-reduce:transition-none\",\n usagePercentage >= 100 ? 'bg-destructive' : usagePercentage >= 80 ? 'bg-warning' : 'bg-primary',\n )}\n style={{ width: `${usagePercentage}%` }}\n />\n </div>\n )}\n </div>\n </Surface>\n );\n })}\n </div>\n </div>\n )}\n\n {/* Credit pools /}\n {!creditPoolsUnavailable && creditPools.length > 0 && (\n <div className=\"space-y-card\">\n <p className={cn(descriptionRecipe.base, \"font-medium\")}>{t('creditsTitle')}</p>\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-card\">\n {creditPools.map(pool => {\n const usagePercentage = pool.totalPurchased > 0\n ? Math.round((pool.totalConsumed / pool.totalPurchased) 100)\n : 0;\n\n return (\n <Surface key={pool.poolKey} asChild emitPolicyVars={false} variant={SurfaceVariant.BASE}>\n <div className={cn(\"p-card\", surfaceRecipe.base)}>\n <h4 className={cn(descriptionRecipe.base, \"font-medium text-foreground mb-section\")}>{pool.poolName}</h4>\n\n <div className=\"space-y-element\">\n <div className={cn(\"flex justify-between\", descriptionRecipe.base)}>\n <span className={descriptionRecipe.base}>{t('availableCredits')}</span>\n <span className={cn(\"font-semibold text-foreground\")}>{formatNumber(pool.available)}</span>\n </div>\n <div className={cn(\"flex justify-between\", descriptionRecipe.base)}>\n <span className={descriptionRecipe.base}>{t('totalPurchased')}</span>\n <span className=\"text-foreground\">{formatNumber(pool.totalPurchased)}</span>\n </div>\n <div className={cn(\"flex justify-between\", descriptionRecipe.base)}>\n <span className={descriptionRecipe.base}>{t('totalConsumed')}</span>\n <span className=\"text-foreground\">{formatNumber(pool.totalConsumed)}</span>\n </div>\n </div>\n\n {pool.totalPurchased > 0 && (\n <div\n className=\"mt-element h-2 bg-muted-foreground/20 rounded-full overflow-hidden\"\n role=\"progressbar\"\n aria-valuenow={pool.totalConsumed}\n aria-valuemin={0}\n aria-valuemax={pool.totalPurchased}\n aria-label={t('creditPoolAriaLabel', { pool: pool.poolName, consumed: formatNumber(pool.totalConsumed), total: formatNumber(pool.totalPurchased) })}\n >\n <div\n className={cn(\n \"h-full rounded-full duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] transition-[width] motion-reduce:transition-none\",\n usagePercentage >= 90 ? 'bg-destructive' : usagePercentage >= 70 ? 'bg-warning' : 'bg-primary',\n )}\n style={{ width: `${usagePercentage}%` }}\n />\n </div>\n )}\n\n {onTopUp && (\n <Button\n variant={ButtonVariants_Variant.SECONDARY}\n size={ButtonSize.SM}\n className=\"mt-section w-full\"\n onClick={() => onTopUp(pool.poolKey)}\n >\n {renderIcon(StandardIconReference.PLUS, { size: IconSize.SM })}\n {t('topUpCredits')}\n </Button>\n )}\n </div>\n </Surface>\n );\n })}\n </div>\n </div>\n )}\n </div>\n );\n}\n"]}

package/dist/esm/components/billing/billing-usage-dashboard.labels.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"billing-usage-dashboard.labels.d.ts","sourceRoot":"","sources":["~~../../../../~~src/components/billing/billing-usage-dashboard.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAa7C,eAAO,MAAM,mCAAmC,EAAE,mBAAmB,~~EA6CpE~~,CAAC"}
1	+ {"version":3,"file":"billing-usage-dashboard.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/billing/billing-usage-dashboard.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAa7C,eAAO,MAAM,mCAAmC,EAAE,mBAAmB,EA+CpE,CAAC"}

package/dist/esm/components/billing/billing-usage-dashboard.labels.js CHANGED Viewed

@@ -11,6 +11,8 @@ import { FrontendComponentType, LabelKind, registerComponentLabels, } from '@wil
 // what it means, so the meaning lives here (single source of truth), not in a
 // separate spec that would drift.
 export const LowLevelBillingUsageDashboardLabels = [
+    { ref: 'usageUnavailable', kind: LabelKind.EMPTY_STATE, purpose: 'Metered usage is temporarily unavailable; do not imply zero consumption' },
+    { ref: 'creditPoolsUnavailable', kind: LabelKind.EMPTY_STATE, purpose: 'Credit balances are temporarily unavailable; do not imply zero credit' },
     { ref: 'title', kind: LabelKind.HEADING, purpose: 'Heading for the usage dashboard panel' },
     { ref: 'currentPeriod', kind: LabelKind.LABEL, purpose: 'Label for the active billing-period indicator' },
     { ref: 'noUsageData', kind: LabelKind.EMPTY_STATE, purpose: 'Shown before any usage has been recorded this period' },

package/dist/esm/components/billing/billing-usage-dashboard.labels.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"billing-usage-dashboard.labels.js","sourceRoot":"","sources":["../../../../../src/components/billing/billing-usage-dashboard.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,SAAS,EAET,uBAAuB,GACxB,MAAM,qCAAqC,CAAC;AAE7C,gFAAgF;AAChF,qDAAqD;AACrD,gFAAgF;AAChF,EAAE;AACF,0EAA0E;AAC1E,2EAA2E;AAC3E,4EAA4E;AAC5E,wEAAwE;AACxE,+EAA+E;AAC/E,8EAA8E;AAC9E,kCAAkC;AAClC,MAAM,CAAC,MAAM,mCAAmC,GAA0B;IACxE,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,uCAAuC,EAAE;IAC3F,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,+CAA+C,EAAE;IACzG,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,sDAAsD,EAAE;IACpH,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,0CAA0C,EAAE;IACrG,EAAE,GAAG,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,sCAAsC,EAAE;IACnG,EAAE,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,0CAA0C,EAAE;IACrG,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,yCAAyC,EAAE;IACnG;QACE,GAAG,EAAE,SAAS;QACd,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,yCAAyC;QAClD,MAAM,EAAE;YACN,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,gCAAgC,EAAE;YAC7D,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,kCAAkC,EAAE;SAC9D;KACF;IACD;QACE,GAAG,EAAE,iBAAiB;QACtB,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,mDAAmD;QAC5D,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,OAAO,EAAE,iDAAiD,EAAE,CAAC;KAC5F;IACD;QACE,GAAG,EAAE,uBAAuB;QAC5B,IAAI,EAAE,SAAS,CAAC,IAAI;QACpB,OAAO,EAAE,sDAAsD;QAC/D,KAAK,EAAE,CAAC,6CAA6C,CAAC;QACtD,MAAM,EAAE;YACN,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,wBAAwB,EAAE;YACrD,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,oBAAoB,EAAE;YACjD,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,wBAAwB,EAAE;SACpD;KACF;IACD;QACE,GAAG,EAAE,qBAAqB;QAC1B,IAAI,EAAE,SAAS,CAAC,IAAI;QACpB,OAAO,EAAE,wDAAwD;QACjE,KAAK,EAAE,CAAC,6CAA6C,CAAC;QACtD,MAAM,EAAE;YACN,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,EAAE;YAC5C,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,4BAA4B,EAAE;YAC1D,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,2BAA2B,EAAE;SACvD;KACF;CACF,CAAC;AAEF,uBAAuB,CAAC,qBAAqB,CAAC,iCAAiC,EAAE,mCAAmC,CAAC,CAAC","sourcesContent":["import {\n FrontendComponentType,\n LabelKind,\n type LabellingUnitaryDef,\n registerComponentLabels,\n} from '@wildo-ai/presets-components-models';\n\n// =============================================================================\n// LABEL CONTRACT — LOW_LEVEL_BILLING_USAGE_DASHBOARD\n// =============================================================================\n//\n// Companion-only metadata: the keys this component renders, each with its\n// purpose, UI kind, and per-variable meaning. The dev companion STATICALLY\n// SCANS this file to generate labels + translations — it is NOT imported at\n// runtime, so it never ships in the browser bundle. Co-located with the\n// component on purpose: the author who declares `usageOf` is the one who knows\n// what it means, so the meaning lives here (single source of truth), not in a\n// separate spec that would drift.\nexport const LowLevelBillingUsageDashboardLabels: LabellingUnitaryDef[] = [\n { ref: 'title', kind: LabelKind.HEADING, purpose: 'Heading for the usage dashboard panel' },\n { ref: 'currentPeriod', kind: LabelKind.LABEL, purpose: 'Label for the active billing-period indicator' },\n { ref: 'noUsageData', kind: LabelKind.EMPTY_STATE, purpose: 'Shown before any usage has been recorded this period' },\n { ref: 'creditsTitle', kind: LabelKind.HEADING, purpose: 'Heading for the credits overview section' },\n { ref: 'availableCredits', kind: LabelKind.LABEL, purpose: 'Credits the customer can still spend' },\n { ref: 'totalPurchased', kind: LabelKind.LABEL, purpose: 'Total credits the customer has purchased' },\n { ref: 'totalConsumed', kind: LabelKind.LABEL, purpose: 'Total credits the customer has consumed' },\n {\n ref: 'usageOf',\n kind: LabelKind.LABEL,\n purpose: 'How much of a metered quota is consumed',\n params: [\n { key: 'current', meaning: 'amount used so far this period' },\n { key: 'limit', meaning: \"the plan's quota for this metric\" },\n ],\n },\n {\n ref: 'trendVsPrevious',\n kind: LabelKind.LABEL,\n purpose: 'Change in usage compared with the previous period',\n params: [{ key: 'percentage', meaning: 'signed percentage change vs the previous period' }],\n },\n {\n ref: 'productUsageAriaLabel',\n kind: LabelKind.ARIA,\n purpose: \"Screen-reader summary of one product's metered usage\",\n notes: ['Self-contained; read aloud as a full phrase'],\n params: [\n { key: 'product', meaning: 'product / feature name' },\n { key: 'current', meaning: 'amount used so far' },\n { key: 'limit', meaning: 'quota for that product' },\n ],\n },\n {\n ref: 'creditPoolAriaLabel',\n kind: LabelKind.ARIA,\n purpose: \"Screen-reader summary of one credit pool's consumption\",\n notes: ['Self-contained; read aloud as a full phrase'],\n params: [\n { key: 'pool', meaning: 'credit-pool name' },\n { key: 'consumed', meaning: 'credits used from the pool' },\n { key: 'total', meaning: 'total credits in the pool' },\n ],\n },\n];\n\nregisterComponentLabels(FrontendComponentType.LOW_LEVEL_BILLING_USAGE_DASHBOARD, LowLevelBillingUsageDashboardLabels);\n"]}
1	+ {"version":3,"file":"billing-usage-dashboard.labels.js","sourceRoot":"","sources":["../../../../../src/components/billing/billing-usage-dashboard.labels.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n FrontendComponentType,\n LabelKind,\n type LabellingUnitaryDef,\n registerComponentLabels,\n} from '@wildo-ai/presets-components-models';\n\n// =============================================================================\n// LABEL CONTRACT — LOW_LEVEL_BILLING_USAGE_DASHBOARD\n// =============================================================================\n//\n// Companion-only metadata: the keys this component renders, each with its\n// purpose, UI kind, and per-variable meaning. The dev companion STATICALLY\n// SCANS this file to generate labels + translations — it is NOT imported at\n// runtime, so it never ships in the browser bundle. Co-located with the\n// component on purpose: the author who declares `usageOf` is the one who knows\n// what it means, so the meaning lives here (single source of truth), not in a\n// separate spec that would drift.\nexport const LowLevelBillingUsageDashboardLabels: LabellingUnitaryDef[] = [\n { ref: 'usageUnavailable', kind: LabelKind.EMPTY_STATE, purpose: 'Metered usage is temporarily unavailable; do not imply zero consumption' },\n { ref: 'creditPoolsUnavailable', kind: LabelKind.EMPTY_STATE, purpose: 'Credit balances are temporarily unavailable; do not imply zero credit' },\n { ref: 'title', kind: LabelKind.HEADING, purpose: 'Heading for the usage dashboard panel' },\n { ref: 'currentPeriod', kind: LabelKind.LABEL, purpose: 'Label for the active billing-period indicator' },\n { ref: 'noUsageData', kind: LabelKind.EMPTY_STATE, purpose: 'Shown before any usage has been recorded this period' },\n { ref: 'creditsTitle', kind: LabelKind.HEADING, purpose: 'Heading for the credits overview section' },\n { ref: 'availableCredits', kind: LabelKind.LABEL, purpose: 'Credits the customer can still spend' },\n { ref: 'totalPurchased', kind: LabelKind.LABEL, purpose: 'Total credits the customer has purchased' },\n { ref: 'totalConsumed', kind: LabelKind.LABEL, purpose: 'Total credits the customer has consumed' },\n {\n ref: 'usageOf',\n kind: LabelKind.LABEL,\n purpose: 'How much of a metered quota is consumed',\n params: [\n { key: 'current', meaning: 'amount used so far this period' },\n { key: 'limit', meaning: \"the plan's quota for this metric\" },\n ],\n },\n {\n ref: 'trendVsPrevious',\n kind: LabelKind.LABEL,\n purpose: 'Change in usage compared with the previous period',\n params: [{ key: 'percentage', meaning: 'signed percentage change vs the previous period' }],\n },\n {\n ref: 'productUsageAriaLabel',\n kind: LabelKind.ARIA,\n purpose: \"Screen-reader summary of one product's metered usage\",\n notes: ['Self-contained; read aloud as a full phrase'],\n params: [\n { key: 'product', meaning: 'product / feature name' },\n { key: 'current', meaning: 'amount used so far' },\n { key: 'limit', meaning: 'quota for that product' },\n ],\n },\n {\n ref: 'creditPoolAriaLabel',\n kind: LabelKind.ARIA,\n purpose: \"Screen-reader summary of one credit pool's consumption\",\n notes: ['Self-contained; read aloud as a full phrase'],\n params: [\n { key: 'pool', meaning: 'credit-pool name' },\n { key: 'consumed', meaning: 'credits used from the pool' },\n { key: 'total', meaning: 'total credits in the pool' },\n ],\n },\n];\n\nregisterComponentLabels(FrontendComponentType.LOW_LEVEL_BILLING_USAGE_DASHBOARD, LowLevelBillingUsageDashboardLabels);\n"]}

package/dist/esm/components/data-display/avatar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["~~../../../../~~src/components/data-display/avatar.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,cAAc,EAKf,MAAM,6BAA6B,CAAC;AA0DrC,eAAO,MAAM,MAAM,gBAAqG,CAAA"}
1	+ {"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/avatar.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,cAAc,EAKf,MAAM,6BAA6B,CAAC;AA0DrC,eAAO,MAAM,MAAM,gBAAqG,CAAA"}

package/dist/esm/components/data-display/avatar.labels.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.labels.d.ts","sourceRoot":"","sources":["~~../../../../~~src/components/data-display/avatar.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,oBAAoB,EAAE,mBAAmB,EAAO,CAAC"}
1	+ {"version":3,"file":"avatar.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/avatar.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,oBAAoB,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/data-display/badge.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["~~../../../../~~src/components/data-display/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,~~EAAyB~~,UAAU,EAAE,MAAM,6BAA6B,CAAA;~~AAkBpF~~,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAmB,EACnB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,~~CAoBhC~~;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
1	+ {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAiB7D,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAmB,EACnB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqBhC;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/esm/components/data-display/badge.js CHANGED Viewed

@@ -1,23 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
-import { IndicatorVariant, UIBehavior } from "@wildo-ai/presets-components-models";
-import { cn, useUI } from "@wildo-ai/saas-frontend-lib";
-/** Map public variant names to IndicatorVariant enum values */
-const VARIANT_MAP = {
-    default: IndicatorVariant.NEUTRAL,
-    secondary: IndicatorVariant.NEUTRAL,
-    destructive: IndicatorVariant.ERROR,
-    outline: IndicatorVariant.NEUTRAL,
-    info: IndicatorVariant.INFO,
-    success: IndicatorVariant.SUCCESS,
-    warning: IndicatorVariant.WARNING,
-};
-/** Structure classes — layout, sizing. Theme-independent. */
-const STRUCTURE = "inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-item-xs [&>svg]:pointer-events-none overflow-hidden";
+import { UIBehavior } from "@wildo-ai/presets-components-models";
+import { badgeVariantIndicator, cn, useUI } from "@wildo-ai/saas-frontend-lib";
+/**
+ * Structure classes — layout, sizing. Theme-independent.
+ *
+ * The gap is the `element` role, whose own definition is "between inline elements (icons, buttons,
+ * tags)" — which is exactly a badge's glyph beside its word. It was `item-xs`: the wrong role at
+ * its smallest step, and `--sp-item` being 0.25rem makes a quarter of it **one pixel**, so every
+ * badge that carries an icon drew the glyph flush against the label. The enum display badge and
+ * the enum edit controls now take the same gap from the same role, which is the point — a value
+ * should not be spaced one way when it is read and another when it is chosen.
+ */
+/* `tabular-nums`: a badge is where a COUNT lives, and `2` and `14` must take the same width in a row of them (#1322). */
+const STRUCTURE = "inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-element-sm [&>svg]:pointer-events-none overflow-hidden tabular-nums";
 function Badge({ className, variant = "default", asChild = false, ...props }) {
     const { getRecipe } = useUI();
     const Comp = asChild ? Slot : "span";
-    const recipe = getRecipe(UIBehavior.INDICATOR, VARIANT_MAP[variant]);
+    // The variant → tone projection is the framework's one seam (`badge-tone.ts`), not this file's.
+    const recipe = getRecipe(UIBehavior.INDICATOR, badgeVariantIndicator(variant));
     return (_jsx(Comp, { "data-slot": "badge", className: cn(STRUCTURE, recipe.base, recipe.states.hover, recipe.states.focus, recipe.states.invalid, recipe.motion.transition, className), ...props }));
 }
 export { Badge };

package/dist/esm/components/data-display/badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../../src/components/data-display/badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,~~EAAyB,gBAAgB,~~EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAA;~~AAGzG~~,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;~~AAEvD,+DAA+D~~;~~AAC/D~~,~~MAAM,WAAW,GAAoD~~;~~IACnE~~,OAAO,EAAE,gBAAgB,CAAC,OAAO;IACjC,SAAS,EAAE,gBAAgB,CAAC,OAAO;IACnC,WAAW,EAAE,gBAAgB,CAAC,KAAK;IACnC,OAAO,EAAE,gBAAgB,CAAC,OAAO;IACjC,IAAI,EAAE,gBAAgB,CAAC,IAAI;IAC3B,OAAO,EAAE,gBAAgB,CAAC,OAAO;IACjC,OAAO,EAAE,gBAAgB,CAAC,OAAO;CAClC,CAAA;AAED,6DAA6D;AAC7D,MAAM,SAAS,GAAW,~~iJAAiJ~~,CAAA;~~AAE3K~~,SAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EACG;IACX,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAA;IACpC,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC,SAAS,EAAE,~~WAAW~~,CAAC,OAAO,CAAC,CAAC,CAAA;~~IAEpE~~,OAAO,CACL,KAAC,IAAI,iBACO,OAAO,EACjB,SAAS,EAAE,EAAE,CACX,SAAS,EACT,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,MAAM,CAAC,KAAK,EACnB,MAAM,CAAC,MAAM,CAAC,KAAK,EACnB,MAAM,CAAC,MAAM,CAAC,OAAO,EACrB,MAAM,CAAC,MAAM,CAAC,UAAU,EACxB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAA","sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ~~FrontendComponentType, IndicatorVariant,~~ UIBehavior } from \"@wildo-ai/presets-components-models\"\nimport type { ~~BadgeVariants_Variant,~~ BadgeProps } from '@wildo-ai/saas-frontend-lib'\n\nimport { cn, useUI } from \"@wildo-ai/saas-frontend-lib\"\n\n/** ~~Map~~ ~~public~~ ~~variant~~ ~~names~~ to ~~IndicatorVariant~~ ~~enum~~ ~~values~~ /\nconst ~~VARIANT_MAP:~~ ~~Record<BadgeVariants_Variant~~, ~~IndicatorVariant>~~ = {\~~n default:~~ ~~IndicatorVariant.NEUTRAL~~,\n ~~secondary:~~ ~~IndicatorVariant~~.~~NEUTRAL,\n destructive:~~ ~~IndicatorVariant.ERROR,\~~n ~~outline:~~ ~~IndicatorVariant~~.~~NEUTRAL,\n info:~~ ~~IndicatorVariant.INFO,\~~n ~~success:~~ ~~IndicatorVariant~~.~~SUCCESS,\n warning:~~ ~~IndicatorVariant.WARNING,\n}~~\n\n/* ~~Structure~~ ~~classes~~ — ~~layout~~, ~~sizing.~~ ~~Theme-independent~~. */\nconst STRUCTURE: string = \"inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-~~item~~-xs [&>svg]:pointer-events-none overflow-hidden\"\n\nfunction Badge({\n className,\n variant = \"default\",\n asChild = false,\n ...props\n}: BadgeProps): React.JSX.Element {\n const { getRecipe } = useUI()\n const Comp = asChild ? Slot : \"span\"\n const recipe = getRecipe(UIBehavior.INDICATOR, ~~VARIANT_MAP[~~variant])\n\n return (\n <Comp\n data-slot=\"badge\"\n className={cn(\n STRUCTURE,\n recipe.base,\n recipe.states.hover,\n recipe.states.focus,\n recipe.states.invalid,\n recipe.motion.transition,\n className,\n )}\n {...props}\n />\n )\n}\n\nexport { Badge }\n"]}
1	+ {"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../../src/components/data-display/badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAA;AAGhE,OAAO,EAAE,qBAAqB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AAE9E;;;;;;;;;GASG;AACH,yHAAyH;AACzH,MAAM,SAAS,GAAW,iKAAiK,CAAA;AAE3L,SAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EACG;IACX,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAA;IACpC,gGAAgG;IAChG,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC,SAAS,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAA;IAE9E,OAAO,CACL,KAAC,IAAI,iBACO,OAAO,EACjB,SAAS,EAAE,EAAE,CACX,SAAS,EACT,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,MAAM,CAAC,KAAK,EACnB,MAAM,CAAC,MAAM,CAAC,KAAK,EACnB,MAAM,CAAC,MAAM,CAAC,OAAO,EACrB,MAAM,CAAC,MAAM,CAAC,UAAU,EACxB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAA","sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { UIBehavior } from \"@wildo-ai/presets-components-models\"\nimport type { BadgeProps } from '@wildo-ai/saas-frontend-lib'\n\nimport { badgeVariantIndicator, cn, useUI } from \"@wildo-ai/saas-frontend-lib\"\n\n/*\n Structure classes — layout, sizing. Theme-independent.\n \n The gap is the `element` role, whose own definition is \"between inline elements (icons, buttons,\n * tags)\" — which is exactly a badge's glyph beside its word. It was `item-xs`: the wrong role at\n * its smallest step, and `--sp-item` being 0.25rem makes a quarter of it one pixel, so every\n * badge that carries an icon drew the glyph flush against the label. The enum display badge and\n * the enum edit controls now take the same gap from the same role, which is the point — a value\n * should not be spaced one way when it is read and another when it is chosen.\n /\n/ `tabular-nums`: a badge is where a COUNT lives, and `2` and `14` must take the same width in a row of them (#1322). */\nconst STRUCTURE: string = \"inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-element-sm [&>svg]:pointer-events-none overflow-hidden tabular-nums\"\n\nfunction Badge({\n className,\n variant = \"default\",\n asChild = false,\n ...props\n}: BadgeProps): React.JSX.Element {\n const { getRecipe } = useUI()\n const Comp = asChild ? Slot : \"span\"\n // The variant → tone projection is the framework's one seam (`badge-tone.ts`), not this file's.\n const recipe = getRecipe(UIBehavior.INDICATOR, badgeVariantIndicator(variant))\n\n return (\n <Comp\n data-slot=\"badge\"\n className={cn(\n STRUCTURE,\n recipe.base,\n recipe.states.hover,\n recipe.states.focus,\n recipe.states.invalid,\n recipe.motion.transition,\n className,\n )}\n {...props}\n />\n )\n}\n\nexport { Badge }\n"]}

package/dist/esm/components/data-display/badge.labels.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.labels.d.ts","sourceRoot":"","sources":["~~../../../../~~src/components/data-display/badge.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,EAAO,CAAC"}
1	+ {"version":3,"file":"badge.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/badge.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/data-display/description-list.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react';
-export declare function DescriptionList({ className, ...props }: React.ComponentPropsWithoutRef<'dl'>): React.JSX.Element;
+import type { DescriptionListProps } from '@wildo-ai/saas-frontend-lib';
+export declare function DescriptionList({ className, layout, ...props }: DescriptionListProps): React.JSX.Element;
 export declare function DescriptionTerm({ className, ...props }: React.ComponentPropsWithoutRef<'dt'>): React.JSX.Element;
 export declare function DescriptionDetails({ className, ...props }: React.ComponentPropsWithoutRef<'dd'>): React.JSX.Element;
 //# sourceMappingURL=description-list.d.ts.map

package/dist/esm/components/data-display/description-list.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"description-list.d.ts","sourceRoot":"","sources":["~~../../../../~~src/components/data-display/description-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;~~AAIzB~~,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,~~KAAK~~,~~CAAC,wBAAwB,CAAC,IAAI,CAAC,~~GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,~~CAgBhH~~;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,~~CAwBhH~~;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,~~CAenH~~"}
1	+ {"version":3,"file":"description-list.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/description-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAevE,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,MAAmC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiBrI;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA0BhH;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkBnH"}

package/dist/esm/components/data-display/description-list.js CHANGED Viewed

@@ -1,12 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn, useUI } from '@wildo-ai/saas-frontend-lib';
-import { TypographyVariant, UIBehavior } from '@wildo-ai/presets-components-models';
-export function DescriptionList({ className, ...props }) {
+import { DescriptionListLayout, TypographyVariant, UIBehavior } from '@wildo-ai/presets-components-models';
+/**
+ * The two LAYOUTS (#1322). The list stamps `data-layout` and the term/detail cells read it through
+ * the `in-data-[layout=…]` variant, so a pair needs no prop of its own and a list nested in another
+ * follows the nearest `dl`. KEY_VALUE: a fixed narrow term column — `--spacing(32)` is 8rem, the
+ * width the mock measured for a ref or a date beside its term — details wrapping beside it and
+ * breaking long refs, no rules, tight row gaps.
+ */
+const LAYOUT_STRUCTURE = {
+    [DescriptionListLayout.ROWS]: 'grid grid-cols-1 sm:grid-cols-[min(50%,--spacing(80))_auto]',
+    [DescriptionListLayout.KEY_VALUE]: 'grid grid-cols-[minmax(0,--spacing(32))_minmax(0,1fr)] gap-x-field gap-y-item-xs',
+};
+export function DescriptionList({ className, layout = DescriptionListLayout.ROWS, ...props }) {
     const { getRecipe } = useUI();
     const recipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.BODY);
-    return (_jsx("dl", { ...props, className: cn(
+    return (_jsx("dl", { "data-layout": layout, ...props, className: cn(
         // Structure
-        'grid grid-cols-1 sm:grid-cols-[min(50%,--spacing(80))_auto]',
+        LAYOUT_STRUCTURE[layout],
         // Style from TYPOGRAPHY.BODY recipe
         recipe.base, className) }));
 }
@@ -25,15 +36,20 @@ export function DescriptionTerm({ className, ...props }) {
          * is what the "default field view" looked like until 2026-09-01. The hairline's color comes
          * from the design system's base rule (`* { border-color: var(--border) }`).
          */
-        'border-t sm:border-t', className) }));
+        'border-t sm:border-t',
+        // KEY_VALUE: no rule, no row padding, the term breaks rather than overflows its narrow column.
+        'in-data-[layout=key-value]:border-t-0 in-data-[layout=key-value]:pt-0 in-data-[layout=key-value]:sm:py-0 in-data-[layout=key-value]:min-w-0 in-data-[layout=key-value]:break-words', className) }));
 }
 export function DescriptionDetails({ className, ...props }) {
     return (_jsx("dd", { ...props, className: cn(
         // Structure
         'pt-item pb-group sm:py-group sm:nth-2:border-none',
-        // Style — value text
-        'text-foreground',
+        // Style — value text. `tabular-nums` (#1322): a column of details is where counts, durations and
+        // timestamps line up, and the feature only touches digits, so it costs a prose detail nothing.
+        'text-foreground tabular-nums',
         // Same rule as DescriptionTerm: a hairline, never the divider recipe's FILL.
-        'sm:border-t', className) }));
+        'sm:border-t',
+        // KEY_VALUE: no rule, no row padding, a long ref wraps inside the column.
+        'in-data-[layout=key-value]:sm:border-t-0 in-data-[layout=key-value]:pt-0 in-data-[layout=key-value]:pb-0 in-data-[layout=key-value]:sm:py-0 in-data-[layout=key-value]:min-w-0 in-data-[layout=key-value]:break-words', className) }));
 }
 //# sourceMappingURL=description-list.js.map

package/dist/esm/components/data-display/description-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"description-list.js","sourceRoot":"","sources":["../../../../../src/components/data-display/description-list.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;~~AACvD~~,OAAO,EAAyB,iBAAiB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAA;~~AAE1G~~,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,~~EAAwC~~;~~IAC3F~~,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IAEvE,OAAO,CACL,~~gBACM~~,KAAK,EACT,SAAS,EAAE,EAAE;QACX,YAAY;QACZ,~~6DAA6D~~;~~QAC7D~~,oCAAoC;QACpC,MAAM,CAAC,IAAI,EACX,SAAS,CACV,GACD,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwC;IAC3F,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,UAAU,GAAG,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAElF,OAAO,CACL,gBACM,KAAK,EACT,SAAS,EAAE,EAAE;QACX,YAAY;QACZ,oDAAoD;QACpD,8CAA8C;QAC9C,UAAU,CAAC,IAAI;QACf;;;;;;WAMG;QACH,sBAAsB,~~EACtB~~,SAAS,CACV,GACD,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwC;IAC9F,OAAO,CACL,gBACM,KAAK,EACT,SAAS,EAAE,EAAE;QACX,YAAY;QACZ,mDAAmD;QACnD,~~qBAAqB~~;~~QACrB~~,~~iBAAiB~~;~~QACjB~~,6EAA6E;QAC7E,aAAa,~~EACb~~,SAAS,CACV,GACD,CACH,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport { cn, useUI } from '@wildo-ai/saas-frontend-lib'\nimport { FrontendComponentType, TypographyVariant, UIBehavior } from '@wildo-ai/presets-components-models'\n\nexport function DescriptionList({ className, ...props }: ~~React.ComponentPropsWithoutRef<'dl'>~~): React.JSX.Element {\n const { getRecipe } = useUI()\n const recipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.BODY)\n\n return (\n <dl\n {...props}\n className={cn(\n // Structure\n ~~'grid grid-cols-1 sm:grid-cols-~~[~~min(50%,--spacing(80))_auto~~]',\n // Style from TYPOGRAPHY.BODY recipe\n recipe.base,\n className\n )}\n />\n )\n}\n\nexport function DescriptionTerm({ className, ...props }: React.ComponentPropsWithoutRef<'dt'>): React.JSX.Element {\n const { getRecipe } = useUI()\n const descRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION)\n\n return (\n <dt\n {...props}\n className={cn(\n // Structure\n 'col-start-1 pt-group first:border-none sm:py-group',\n // Style — term uses description color (muted)\n descRecipe.base,\n /\n A plain `border-t`, NOT the divider recipe. The DIVIDER recipe's base is a background\n * FILL (`bg-border` and per-theme variants) for elements that ARE the line — Separator, menu\n * rules. Composed onto a whole `<dt>` it painted every term cell as a filled gray box, which\n * is what the \"default field view\" looked like until 2026-09-01. The hairline's color comes\n * from the design system's base rule (`* { border-color: var(--border) }`).\n */\n 'border-t sm:border-t',\n className\n )}\n />\n )\n}\n\nexport function DescriptionDetails({ className, ...props }: React.ComponentPropsWithoutRef<'dd'>): React.JSX.Element {\n return (\n <dd\n {...props}\n className={cn(\n // Structure\n 'pt-item pb-group sm:py-group sm:nth-2:border-none',\n // Style — value text\n 'text-foreground',\n // Same rule as DescriptionTerm: a hairline, never the divider recipe's FILL.\n 'sm:border-t',\n className\n )}\n />\n )\n}\n"]}
1	+ {"version":3,"file":"description-list.js","sourceRoot":"","sources":["../../../../../src/components/data-display/description-list.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AAEvD,OAAO,EAAE,qBAAqB,EAAyB,iBAAiB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAA;AAEjI;;;;;;GAMG;AACH,MAAM,gBAAgB,GAA0C;IAC9D,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,6DAA6D;IAC3F,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,kFAAkF;CACtH,CAAA;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,qBAAqB,CAAC,IAAI,EAAE,GAAG,KAAK,EAAwB;IAChH,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IAEvE,OAAO,CACL,4BACe,MAAM,KACf,KAAK,EACT,SAAS,EAAE,EAAE;QACX,YAAY;QACZ,gBAAgB,CAAC,MAAM,CAAC;QACxB,oCAAoC;QACpC,MAAM,CAAC,IAAI,EACX,SAAS,CACV,GACD,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwC;IAC3F,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,UAAU,GAAG,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAElF,OAAO,CACL,gBACM,KAAK,EACT,SAAS,EAAE,EAAE;QACX,YAAY;QACZ,oDAAoD;QACpD,8CAA8C;QAC9C,UAAU,CAAC,IAAI;QACf;;;;;;WAMG;QACH,sBAAsB;QACtB,+FAA+F;QAC/F,oLAAoL,EACpL,SAAS,CACV,GACD,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwC;IAC9F,OAAO,CACL,gBACM,KAAK,EACT,SAAS,EAAE,EAAE;QACX,YAAY;QACZ,mDAAmD;QACnD,iGAAiG;QACjG,+FAA+F;QAC/F,8BAA8B;QAC9B,6EAA6E;QAC7E,aAAa;QACb,0EAA0E;QAC1E,uNAAuN,EACvN,SAAS,CACV,GACD,CACH,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport { cn, useUI } from '@wildo-ai/saas-frontend-lib'\nimport type { DescriptionListProps } from '@wildo-ai/saas-frontend-lib'\nimport { DescriptionListLayout, FrontendComponentType, TypographyVariant, UIBehavior } from '@wildo-ai/presets-components-models'\n\n/*\n The two LAYOUTS (#1322). The list stamps `data-layout` and the term/detail cells read it through\n * the `in-data-[layout=…]` variant, so a pair needs no prop of its own and a list nested in another\n * follows the nearest `dl`. KEY_VALUE: a fixed narrow term column — `--spacing(32)` is 8rem, the\n * width the mock measured for a ref or a date beside its term — details wrapping beside it and\n * breaking long refs, no rules, tight row gaps.\n /\nconst LAYOUT_STRUCTURE: Record<DescriptionListLayout, string> = {\n [DescriptionListLayout.ROWS]: 'grid grid-cols-1 sm:grid-cols-[min(50%,--spacing(80))_auto]',\n [DescriptionListLayout.KEY_VALUE]: 'grid grid-cols-[minmax(0,--spacing(32))_minmax(0,1fr)] gap-x-field gap-y-item-xs',\n}\n\nexport function DescriptionList({ className, layout = DescriptionListLayout.ROWS, ...props }: DescriptionListProps): React.JSX.Element {\n const { getRecipe } = useUI()\n const recipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.BODY)\n\n return (\n <dl\n data-layout={layout}\n {...props}\n className={cn(\n // Structure\n LAYOUT_STRUCTURE[layout],\n // Style from TYPOGRAPHY.BODY recipe\n recipe.base,\n className\n )}\n />\n )\n}\n\nexport function DescriptionTerm({ className, ...props }: React.ComponentPropsWithoutRef<'dt'>): React.JSX.Element {\n const { getRecipe } = useUI()\n const descRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION)\n\n return (\n <dt\n {...props}\n className={cn(\n // Structure\n 'col-start-1 pt-group first:border-none sm:py-group',\n // Style — term uses description color (muted)\n descRecipe.base,\n /\n * A plain `border-t`, NOT the divider recipe. The DIVIDER recipe's base is a background\n * FILL (`bg-border` and per-theme variants) for elements that ARE the line — Separator, menu\n * rules. Composed onto a whole `<dt>` it painted every term cell as a filled gray box, which\n * is what the \"default field view\" looked like until 2026-09-01. The hairline's color comes\n * from the design system's base rule (`* { border-color: var(--border) }`).\n */\n 'border-t sm:border-t',\n // KEY_VALUE: no rule, no row padding, the term breaks rather than overflows its narrow column.\n 'in-data-[layout=key-value]:border-t-0 in-data-[layout=key-value]:pt-0 in-data-[layout=key-value]:sm:py-0 in-data-[layout=key-value]:min-w-0 in-data-[layout=key-value]:break-words',\n className\n )}\n />\n )\n}\n\nexport function DescriptionDetails({ className, ...props }: React.ComponentPropsWithoutRef<'dd'>): React.JSX.Element {\n return (\n <dd\n {...props}\n className={cn(\n // Structure\n 'pt-item pb-group sm:py-group sm:nth-2:border-none',\n // Style — value text. `tabular-nums` (#1322): a column of details is where counts, durations and\n // timestamps line up, and the feature only touches digits, so it costs a prose detail nothing.\n 'text-foreground tabular-nums',\n // Same rule as DescriptionTerm: a hairline, never the divider recipe's FILL.\n 'sm:border-t',\n // KEY_VALUE: no rule, no row padding, a long ref wraps inside the column.\n 'in-data-[layout=key-value]:sm:border-t-0 in-data-[layout=key-value]:pt-0 in-data-[layout=key-value]:pb-0 in-data-[layout=key-value]:sm:py-0 in-data-[layout=key-value]:min-w-0 in-data-[layout=key-value]:break-words',\n className\n )}\n />\n )\n}\n"]}

package/dist/esm/components/data-display/description-list.labels.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"description-list.labels.d.ts","sourceRoot":"","sources":["~~../../../../~~src/components/data-display/description-list.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,gCAAgC,EAAE,mBAAmB,EAAO,CAAC;AAG1E,eAAO,MAAM,6BAA6B,EAAE,mBAAmB,EAAO,CAAC;AAGvE,eAAO,MAAM,6BAA6B,EAAE,mBAAmB,EAAO,CAAC"}
1	+ {"version":3,"file":"description-list.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/description-list.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,gCAAgC,EAAE,mBAAmB,EAAO,CAAC;AAG1E,eAAO,MAAM,6BAA6B,EAAE,mBAAmB,EAAO,CAAC;AAGvE,eAAO,MAAM,6BAA6B,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/data-display/duration.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { DurationProps } from "@wildo-ai/saas-frontend-lib";
+/**
+ * DEFAULT preset for `LOW_LEVEL_DURATION`: the elapsed span between two instants, ticking while the
+ * second one is unknown.
+ *
+ * `tabular-nums` is not decoration. A ticking value whose digits are proportionally spaced shifts
+ * every element to its right once a second, which on a board full of them reads as the surface
+ * twitching. Tabular figures hold the column.
+ */
+export declare function Duration({ since, until, size, variant, className, }: DurationProps): React.JSX.Element | null;
+export declare namespace Duration {
+    var displayName: string;
+}
+//# sourceMappingURL=duration.d.ts.map

package/dist/esm/components/data-display/duration.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"duration.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/duration.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAEhE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,IAAkB,EAClB,OAA2B,EAC3B,SAAS,GACV,EAAE,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAwC1C;yBA9Ce,QAAQ"}

package/dist/esm/components/data-display/duration.js ADDED Viewed

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { FrontendComponentType, TextSize, TextVariant } from "@wildo-ai/presets-components-models";
+import { cn, Text, useI18n } from "@wildo-ai/saas-frontend-lib";
+/**
+ * DEFAULT preset for `LOW_LEVEL_DURATION`: the elapsed span between two instants, ticking while the
+ * second one is unknown.
+ *
+ * `tabular-nums` is not decoration. A ticking value whose digits are proportionally spaced shifts
+ * every element to its right once a second, which on a board full of them reads as the surface
+ * twitching. Tabular figures hold the column.
+ */
+export function Duration({ since, until, size = TextSize.SM, variant = TextVariant.MUTED, className, }) {
+    const settled = until !== undefined;
+    const [now, setNow] = React.useState(() => Date.now());
+    const { tComponent, isReady } = useI18n({ component: [FrontendComponentType.LOW_LEVEL_DURATION] });
+    /*
+     * The tick exists only while the span is open. Hooks run unconditionally — the early returns below
+     * sit AFTER every hook, because a first ready render that adds a hook is a Rules-of-Hooks crash.
+     */
+    React.useEffect(() => {
+        if (settled)
+            return undefined;
+        const handle = setInterval(() => { setNow(Date.now()); }, 1_000);
+        return () => clearInterval(handle);
+    }, [settled]);
+    if (!isReady)
+        return null;
+    const startedMs = Date.parse(since);
+    const endedMs = settled ? Date.parse(until) : now;
+    if (Number.isNaN(startedMs) || Number.isNaN(endedMs))
+        return null;
+    const totalSeconds = Math.floor(Math.max(0, endedMs - startedMs) / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const text = totalSeconds < 60
+        ? tComponent(FrontendComponentType.LOW_LEVEL_DURATION, 'compactSeconds', { seconds: totalSeconds })
+        : minutes < 60
+            ? tComponent(FrontendComponentType.LOW_LEVEL_DURATION, 'compactMinutes', {
+                minutes,
+                seconds: String(totalSeconds % 60).padStart(2, '0'),
+            })
+            : tComponent(FrontendComponentType.LOW_LEVEL_DURATION, 'compactHours', {
+                hours: Math.floor(minutes / 60),
+                minutes: String(minutes % 60).padStart(2, '0'),
+            });
+    return (_jsx(Text, { as: "span", size: size, variant: variant, className: cn("tabular-nums", className), children: text }));
+}
+Duration.displayName = "Duration";
+//# sourceMappingURL=duration.js.map