@happyvertical/smrt-ui 0.30.0

package/AGENTS.md

@@ -0,0 +1,50 @@
+# @happyvertical/smrt-ui
+
+Domain-agnostic Svelte 5 UI runtime for SMRT. This is the **leaf** of the
+Svelte stack: it depends only on `svelte` (peer) and `@happyvertical/smrt-types`
+— no smrt domain package — so domain packages (assets, commerce, content, …)
+can consume UI primitives, i18n, the theme system, and the module UI registry
+**without** taking a dependency on the top-level `@happyvertical/smrt-svelte`
+integration layer. Extracting this leaf is what breaks the domain ⇄ smrt-svelte
+peer cycle (see happyvertical/smrt#1582).
+
+## What lives here
+
+| Subpath | Contents |
+|---------|----------|
+| `.` | barrel re-exporting the primitives, registry, and theme system |
+| `./ui` | `Button`, `Card`, `Badge`, `Avatar`, `Chip`, `Skeleton`, `Tooltip`, `Dropdown`, `Tree`, `Pagination`, … |
+| `./feedback` | `Modal`, `ConfirmDialog`, `LoadingOverlay`, `ProgressBar` |
+| `./layout` | `Container`, `Grid`, `Header`, `Footer`, `PageHeader`, `EmptyState`, … |
+| `./calendar` | `Calendar`, `DayView` |
+| `./chat` | `MessageBubble`, `ReactionPicker`, `TypingIndicator` |
+| `./i18n` | i18n **client**: `useI18n`, `<Trans>`, `defineMessages`, `renderTemplate` (no `smrt-languages` import — the server resolver stays in `smrt-svelte/i18n/server`) |
+| `./registry` | `ModuleUIRegistry` for cross-package component discovery |
+| `./theme` | simple `ThemeProvider` + context (`useTheme` consumes this from `smrt-svelte`) |
+| `./themes` | canonical preset token system (material/glass/studio), CSS generation |
+| `./styles/tokens.css` | base token stylesheet |
+
+Also internal: `actions/` (`ripple`, `permission`), `display/`, `data/`,
+`nav/`, `permissions/`, `utils/`, `test-support/`.
+
+## Rules
+
+- **No smrt domain imports.** A `@happyvertical/smrt-*` import other than
+  `smrt-types` reintroduces the cycle. Components consume `var(--smrt-*)` CSS
+  tokens directly and accept identity data via `smrt-types` contracts.
+- **Identity-data UI is fine; domain-*importing* UI is not.** The line is "does
+  it import a domain package," not "is it identity-related." Components that only
+  render identity records through the `smrt-types` contracts are domain-agnostic
+  and live here — including `RoleBadge` / `RoleSelector` / `MembershipCard` /
+  `MembershipList`. Composites that actually import a domain package — admin
+  shells (`@happyvertical/smrt-agents/ui`) or forms wired to `smrt-svelte`'s AI
+  hooks / browser-ai — live in `@happyvertical/smrt-svelte`, which depends on
+  this package.
+- Built with `svelte-package`; consumed via the `svelte` export condition.
+
+## Gotchas
+
+- **i18n split**: the client (here) is dependency-free; the Node-only server
+  resolver (`buildI18nSnapshot`, → `@happyvertical/smrt-languages`) stays in
+  `@happyvertical/smrt-svelte/i18n/server`. Package string catalogs register via
+  `defineMessages` imported from `@happyvertical/smrt-ui/i18n`.

package/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright <2025> <Happy Vertical Corporation>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/actions/__tests__/ripple.test.js

@@ -0,0 +1,28 @@
+/**
+ * Unit test for the ripple action (coverage uplift, S6 gate).
+ */
+import { describe, expect, it } from 'vitest';
+import { ripple } from '../ripple';
+describe('ripple action', () => {
+    it('appends a ripple element on pointer down', () => {
+        const node = document.createElement('button');
+        document.body.appendChild(node);
+        const action = ripple(node);
+        const before = node.querySelectorAll('span').length;
+        node.dispatchEvent(new MouseEvent('mousedown', { clientX: 5, clientY: 5, bubbles: true }));
+        expect(node.querySelectorAll('span').length).toBeGreaterThan(before);
+        // destroy detaches listeners without throwing
+        action?.destroy?.();
+        node.remove();
+    });
+    it('supports touch start', () => {
+        const node = document.createElement('button');
+        document.body.appendChild(node);
+        const action = ripple(node);
+        const touch = { clientX: 3, clientY: 3 };
+        node.dispatchEvent(new TouchEvent('touchstart', { touches: [touch], bubbles: true }));
+        expect(node.querySelectorAll('span').length).toBeGreaterThan(0);
+        action?.destroy?.();
+        node.remove();
+    });
+});

package/dist/actions/permission.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Svelte action that shows/hides an element based on permissions
+ *
+ * Usage:
+ * <button use:permission={{ slug: 'articles.edit', permissions: userPermissions }}>
+ *   Edit
+ * </button>
+ */
+interface PermissionParams {
+    /** Permission slug to check */
+    slug: string;
+    /** User's current permissions */
+    permissions: string[];
+    /** If true, hide instead of removing from DOM */
+    hideOnly?: boolean;
+}
+export declare function permission(node: HTMLElement, params: PermissionParams): {
+    update: (params: PermissionParams) => void;
+    destroy: () => void;
+};
+/**
+ * Check if user has a specific permission
+ */
+export declare function hasPermission(permissions: string[], slug: string): boolean;
+/**
+ * Check if user has all specified permissions
+ */
+export declare function hasAllPermissions(permissions: string[], slugs: string[]): boolean;
+/**
+ * Check if user has any of the specified permissions
+ */
+export declare function hasAnyPermission(permissions: string[], slugs: string[]): boolean;
+export {};
+//# sourceMappingURL=permission.d.ts.map

package/dist/actions/permission.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"permission.d.ts","sourceRoot":"","sources":["../../src/actions/permission.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,UAAU,gBAAgB;IACxB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,UAAU,CACxB,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,gBAAgB,GACvB;IAAE,MAAM,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CA6CrE;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAE1E;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EAAE,EACrB,KAAK,EAAE,MAAM,EAAE,GACd,OAAO,CAET;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,MAAM,EAAE,EACrB,KAAK,EAAE,MAAM,EAAE,GACd,OAAO,CAET"}

package/dist/actions/permission.js

@@ -0,0 +1,70 @@
+/**
+ * Svelte action that shows/hides an element based on permissions
+ *
+ * Usage:
+ * <button use:permission={{ slug: 'articles.edit', permissions: userPermissions }}>
+ *   Edit
+ * </button>
+ */
+export function permission(node, params) {
+    // Save original styles for restoration
+    const originalStyles = {
+        display: node.style.display,
+        visibility: node.style.visibility,
+        position: node.style.position,
+        pointerEvents: node.style.pointerEvents,
+    };
+    function update(params) {
+        const hasPermission = params.permissions.includes(params.slug);
+        if (hasPermission) {
+            // Restore original styles
+            node.style.display = originalStyles.display;
+            node.style.visibility = originalStyles.visibility;
+            node.style.position = originalStyles.position;
+            node.style.pointerEvents = originalStyles.pointerEvents;
+            node.removeAttribute('aria-hidden');
+        }
+        else if (params.hideOnly) {
+            // Hide only: make invisible but keep in DOM layout
+            node.style.display = 'none';
+            node.setAttribute('aria-hidden', 'true');
+        }
+        else {
+            // Default: remove from layout flow completely
+            node.style.display = 'none';
+            node.style.visibility = 'hidden';
+            node.style.position = 'absolute';
+            node.style.pointerEvents = 'none';
+            node.setAttribute('aria-hidden', 'true');
+        }
+    }
+    update(params);
+    return {
+        update,
+        destroy() {
+            // Restore original styles on unmount
+            node.style.display = originalStyles.display;
+            node.style.visibility = originalStyles.visibility;
+            node.style.position = originalStyles.position;
+            node.style.pointerEvents = originalStyles.pointerEvents;
+        },
+    };
+}
+/**
+ * Check if user has a specific permission
+ */
+export function hasPermission(permissions, slug) {
+    return permissions.includes(slug);
+}
+/**
+ * Check if user has all specified permissions
+ */
+export function hasAllPermissions(permissions, slugs) {
+    return slugs.every((slug) => permissions.includes(slug));
+}
+/**
+ * Check if user has any of the specified permissions
+ */
+export function hasAnyPermission(permissions, slugs) {
+    return slugs.some((slug) => permissions.includes(slug));
+}

package/dist/actions/ripple.d.ts

@@ -0,0 +1,7 @@
+import type { Action } from 'svelte/action';
+/**
+ * Svelte action to add a Material 3 ripple effect to an element.
+ * Respects CSS variables defined by ThemeProvider.
+ */
+export declare const ripple: Action<HTMLElement>;
+//# sourceMappingURL=ripple.d.ts.map

package/dist/actions/ripple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../src/actions/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,WAAW,CA2EtC,CAAC"}

package/dist/actions/ripple.js

@@ -0,0 +1,65 @@
+/**
+ * Svelte action to add a Material 3 ripple effect to an element.
+ * Respects CSS variables defined by ThemeProvider.
+ */
+export const ripple = (node) => {
+    const handleStart = (e) => {
+        const rect = node.getBoundingClientRect();
+        const clientX = 'touches' in e
+            ? e.touches[0].clientX
+            : e.clientX;
+        const clientY = 'touches' in e
+            ? e.touches[0].clientY
+            : e.clientY;
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
+        const diameter = Math.max(rect.width, rect.height) * 2.5;
+        const radius = diameter / 2;
+        const rippleEl = document.createElement('span');
+        // Inline critical styles
+        rippleEl.style.position = 'absolute';
+        rippleEl.style.borderRadius = '50%';
+        rippleEl.style.pointerEvents = 'none';
+        rippleEl.style.width = rippleEl.style.height = `${diameter}px`;
+        rippleEl.style.left = `${x - radius}px`;
+        rippleEl.style.top = `${y - radius}px`;
+        rippleEl.style.backgroundColor =
+            'var(--md-sys-color-primary, currentColor)';
+        rippleEl.style.opacity = '0.12';
+        rippleEl.style.transform = 'scale(0)';
+        rippleEl.style.transition =
+            'transform 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 600ms linear';
+        rippleEl.classList.add('smrt-ripple');
+        node.appendChild(rippleEl);
+        // Trigger animation
+        requestAnimationFrame(() => {
+            rippleEl.style.transform = 'scale(1)';
+        });
+        const removeRipple = () => {
+            rippleEl.style.opacity = '0';
+            setTimeout(() => {
+                if (rippleEl.parentNode === node) {
+                    node.removeChild(rippleEl);
+                }
+            }, 600);
+        };
+        window.addEventListener('mouseup', removeRipple, { once: true });
+        window.addEventListener('touchend', removeRipple, { once: true });
+    };
+    node.addEventListener('mousedown', handleStart);
+    node.addEventListener('touchstart', handleStart, { passive: true });
+    // Ensure node is prepared
+    const originalPosition = node.style.position;
+    const originalOverflow = node.style.overflow;
+    if (!node.style.position || node.style.position === 'static') {
+        node.style.position = 'relative';
+    }
+    node.style.overflow = 'hidden';
+    return {
+        destroy() {
+            node.removeEventListener('mousedown', handleStart);
+            node.removeEventListener('touchstart', handleStart);
+            // Restore styles if necessary, though usually fine to keep for UI components
+        },
+    };
+};