@joewinke/jatui 0.1.33 → 0.2.0

package/dist/utils/splitText.js

@@ -0,0 +1,94 @@
+// Pattern after Splitting.js (MIT) — https://github.com/shshaw/Splitting
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/**
+ * Wraps text content of `node` into `<span>` elements and stamps CSS custom
+ * properties so pure-CSS animations can stagger by index.
+ *
+ * For `by: 'char'`: sets `--char-index` (0-based) and `--char-total`.
+ * For `by: 'word'`: sets `--word-index` (0-based) and `--word-total`.
+ * For `by: 'line'`: sets `--line-index` (0-based) and `--line-total`.
+ *
+ * Accessibility: stamps `aria-label` with the original text on `node` and
+ * marks every injected span as `aria-hidden="true"`.
+ *
+ * Re-splitting a node that has already been split is safe — previous spans
+ * are flattened back to text before the new split.
+ */
+export function splitText(node, options) {
+    var _a, _b;
+    var by = options.by;
+    // Capture original text and restore any previous split.
+    var originalText = (_b = (_a = node.getAttribute('data-split-original')) !== null && _a !== void 0 ? _a : node.textContent) !== null && _b !== void 0 ? _b : '';
+    restoreNode(node, originalText);
+    // Set accessibility label so the unsplit text is announced.
+    node.setAttribute('aria-label', originalText);
+    node.setAttribute('data-split-original', originalText);
+    node.setAttribute('data-split-by', by);
+    var count = 0;
+    if (by === 'char') {
+        var chars = __spreadArray([], originalText, true); // Unicode-aware
+        count = chars.length;
+        node.innerHTML = '';
+        for (var i = 0; i < chars.length; i++) {
+            node.appendChild(makeSpan(chars[i], '--char-index', i, '--char-total', count));
+        }
+    }
+    else if (by === 'word') {
+        // Split preserving whitespace tokens so spaces render correctly.
+        var tokens = originalText.split(/(\s+)/);
+        var words = tokens.filter(function (t) { return !/^\s+$/.test(t); });
+        count = words.length;
+        node.innerHTML = '';
+        var wordIdx = 0;
+        for (var _i = 0, tokens_1 = tokens; _i < tokens_1.length; _i++) {
+            var token = tokens_1[_i];
+            if (/^\s+$/.test(token)) {
+                var space = document.createElement('span');
+                space.setAttribute('aria-hidden', 'true');
+                space.style.whiteSpace = 'pre';
+                space.textContent = token;
+                node.appendChild(space);
+            }
+            else {
+                node.appendChild(makeSpan(token, '--word-index', wordIdx++, '--word-total', count));
+            }
+        }
+    }
+    else {
+        // 'line' — split by newline characters in the original text.
+        var lines = originalText.split('\n');
+        count = lines.length;
+        node.innerHTML = '';
+        for (var i = 0; i < lines.length; i++) {
+            if (i > 0)
+                node.appendChild(document.createTextNode('\n'));
+            node.appendChild(makeSpan(lines[i], '--line-index', i, '--line-total', count));
+        }
+    }
+    return {
+        count: count,
+        cleanup: function () { return restoreNode(node, originalText); }
+    };
+}
+function makeSpan(text, indexVar, index, totalVar, total) {
+    var span = document.createElement('span');
+    span.setAttribute('aria-hidden', 'true');
+    span.style.setProperty(indexVar, String(index));
+    span.style.setProperty(totalVar, String(total));
+    span.textContent = text;
+    return span;
+}
+function restoreNode(node, originalText) {
+    node.textContent = originalText;
+    node.removeAttribute('aria-label');
+    node.removeAttribute('data-split-original');
+    node.removeAttribute('data-split-by');
+}

package/dist/utils/themeWipe.d.ts

@@ -0,0 +1,21 @@
+/**
+ * themeWipe — circular View Transition reveal from a click origin.
+ *
+ * Wraps document.startViewTransition, computes a covering radius from the
+ * click point, and animates ::view-transition-new(root) with a clip-path
+ * circle via WAAPI (~500ms, var(--motion-glide)).
+ *
+ * Falls back gracefully: if startViewTransition is unsupported or
+ * prefers-reduced-motion is set, applyTheme() runs synchronously with no
+ * animation.
+ */
+/**
+ * @param event - The click (or pointer) event that triggered the theme toggle.
+ *                Used to anchor the reveal circle. Pass null to default to
+ *                screen center.
+ * @param applyTheme - Callback that performs the actual theme mutation
+ *                     (e.g. set data-theme, update localStorage). Called
+ *                     inside the startViewTransition callback so the snapshot
+ *                     captures the old state and the new DOM is recorded after.
+ */
+export declare function themeWipe(event: MouseEvent | PointerEvent | null, applyTheme: () => void): Promise<void>;

package/dist/utils/themeWipe.js

@@ -0,0 +1,94 @@
+/**
+ * themeWipe — circular View Transition reveal from a click origin.
+ *
+ * Wraps document.startViewTransition, computes a covering radius from the
+ * click point, and animates ::view-transition-new(root) with a clip-path
+ * circle via WAAPI (~500ms, var(--motion-glide)).
+ *
+ * Falls back gracefully: if startViewTransition is unsupported or
+ * prefers-reduced-motion is set, applyTheme() runs synchronously with no
+ * animation.
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var DURATION = 500;
+var EASING = 'cubic-bezier(0.16, 1, 0.3, 1)'; // --motion-glide fallback
+/**
+ * @param event - The click (or pointer) event that triggered the theme toggle.
+ *                Used to anchor the reveal circle. Pass null to default to
+ *                screen center.
+ * @param applyTheme - Callback that performs the actual theme mutation
+ *                     (e.g. set data-theme, update localStorage). Called
+ *                     inside the startViewTransition callback so the snapshot
+ *                     captures the old state and the new DOM is recorded after.
+ */
+export function themeWipe(event, applyTheme) {
+    return __awaiter(this, void 0, Promise, function () {
+        var prefersReduced, x, y, endRadius, transition, resolvedEasing;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+                    if (prefersReduced || !document.startViewTransition) {
+                        applyTheme();
+                        return [2 /*return*/];
+                    }
+                    x = event ? event.clientX : window.innerWidth / 2;
+                    y = event ? event.clientY : window.innerHeight / 2;
+                    endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
+                    transition = document.startViewTransition(applyTheme);
+                    // Wait until both snapshots are captured before animating
+                    return [4 /*yield*/, transition.ready];
+                case 1:
+                    // Wait until both snapshots are captured before animating
+                    _a.sent();
+                    resolvedEasing = getComputedStyle(document.documentElement)
+                        .getPropertyValue('--motion-glide')
+                        .trim() || EASING;
+                    document.documentElement.animate([
+                        { clipPath: "circle(0px at ".concat(x, "px ").concat(y, "px)") },
+                        { clipPath: "circle(".concat(endRadius, "px at ").concat(x, "px ").concat(y, "px)") }
+                    ], {
+                        duration: DURATION,
+                        easing: resolvedEasing,
+                        pseudoElement: '::view-transition-new(root)'
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    });
+}

package/dist/utils/viewTransition.d.ts

@@ -0,0 +1,23 @@
+/**
+ * viewTransition — SvelteKit onNavigate helper.
+ *
+ * Drop this into +layout.svelte to wrap each client-side navigation with
+ * document.startViewTransition, giving the browser a chance to animate
+ * between pages using the View Transitions API.
+ *
+ * Usage in +layout.svelte:
+ *   <script>
+ *     import { onNavigate } from '$app/navigation';
+ *     import { viewTransition } from '../../../dist';
+ *     viewTransition(onNavigate);
+ *   </script>
+ *
+ * Falls back silently: if startViewTransition is unsupported, the navigation
+ * proceeds normally. prefers-reduced-motion is honoured automatically by the
+ * browser's View Transitions implementation; no extra guard is needed here.
+ */
+type OnNavigateCallback = (callback: (navigation: {
+    complete: Promise<void>;
+}) => void | (() => void) | Promise<void | (() => void)>) => void;
+export declare function viewTransition(onNavigate: OnNavigateCallback): void;
+export {};

package/dist/utils/viewTransition.js

@@ -0,0 +1,75 @@
+/**
+ * viewTransition — SvelteKit onNavigate helper.
+ *
+ * Drop this into +layout.svelte to wrap each client-side navigation with
+ * document.startViewTransition, giving the browser a chance to animate
+ * between pages using the View Transitions API.
+ *
+ * Usage in +layout.svelte:
+ *   <script>
+ *     import { onNavigate } from '$app/navigation';
+ *     import { viewTransition } from '../../../dist';
+ *     viewTransition(onNavigate);
+ *   </script>
+ *
+ * Falls back silently: if startViewTransition is unsupported, the navigation
+ * proceeds normally. prefers-reduced-motion is honoured automatically by the
+ * browser's View Transitions implementation; no extra guard is needed here.
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+export function viewTransition(onNavigate) {
+    var _this = this;
+    onNavigate(function (navigation) {
+        if (!document.startViewTransition)
+            return;
+        return new Promise(function (resolve) {
+            document.startViewTransition(function () { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            resolve();
+                            return [4 /*yield*/, navigation.complete];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.1.33",
+  "version": "0.2.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",
@@ -17,7 +17,14 @@
       "svelte": "./dist/dnd/index.js",
       "default": "./dist/dnd/index.js"
     },
-    "./styles/rail.css": "./dist/styles/rail.css"
+    "./styles/rail.css": "./dist/styles/rail.css",
+    "./showcase": {
+      "types": "./dist/showcase/index.d.ts",
+      "svelte": "./dist/showcase/index.js",
+      "default": "./dist/showcase/index.js"
+    },
+    "./styles/motion.css": "./dist/styles/motion.css",
+    "./styles/tokens.css": "./dist/styles/tokens.css"
   },
   "files": [
     "dist",
@@ -43,7 +50,15 @@
     "d3": "^7.0.0",
     "daisyui": "^5.0.0",
     "svelte": "^5.0.0",
-    "tailwindcss": "^4.0.0"
+    "tailwindcss": "^4.0.0",
+    "@tanstack/table-core": "^8.0.0",
+    "@floating-ui/dom": "^1.0.0",
+    "@xyflow/svelte": "^1.0.0",
+    "cobe": "^2.0.0",
+    "@paper-design/shaders": ">=0.0.50",
+    "motion": "^12.0.0",
+    "lenis": "^1.0.0",
+    "embla-carousel-svelte": "^8.0.0"
   },
   "peerDependenciesMeta": {
     "@atlaskit/pragmatic-drag-and-drop": {
@@ -66,6 +81,30 @@
     },
     "tailwindcss": {
       "optional": false
+    },
+    "@tanstack/table-core": {
+      "optional": true
+    },
+    "@floating-ui/dom": {
+      "optional": true
+    },
+    "@xyflow/svelte": {
+      "optional": true
+    },
+    "cobe": {
+      "optional": true
+    },
+    "@paper-design/shaders": {
+      "optional": true
+    },
+    "motion": {
+      "optional": true
+    },
+    "lenis": {
+      "optional": true
+    },
+    "embla-carousel-svelte": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -73,15 +112,23 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "~3.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "~2.0.0",
     "@atlaskit/pragmatic-drag-and-drop-live-region": "~2.0.0",
+    "@floating-ui/dom": "^1.8.0",
+    "@paper-design/shaders": "^0.0.77",
     "@sveltejs/adapter-auto": "^6.0.0",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.21.0",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
     "@tailwindcss/vite": "^4.0.0",
+    "@tanstack/table-core": "^8.21.3",
     "@types/d3": "^7.4.3",
+    "@xyflow/svelte": "^1.6.2",
+    "cobe": "^2.0.1",
     "d3": "^7.9.0",
     "daisyui": "^5.0.0",
+    "embla-carousel-svelte": "^8.6.0",
+    "lenis": "^1.3.25",
+    "motion": "^12.42.2",
     "svelte": "^5.0.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.0.0",