@kismet-ux/constellation 1.8.0 → 1.11.0

package/dist/utils/portal.js

@@ -0,0 +1,40 @@
+/**
+ * Every Constellation surface that escapes its parent — Select and Combobox
+ * panels, DropdownMenu, DatePicker, Tooltip, Dialog, Sheet, the alert stack —
+ * renders through a React portal into `document.body`.
+ *
+ * React events still bubble through the React tree, so an `onClick` on an
+ * ancestor component sees them. A NATIVE `document` listener does not: it sees
+ * the event at `document.body`, and an `element.contains(event.target)` test
+ * against the component that owns the dropdown returns false.
+ *
+ * That is how a dismiss-on-outside-click container closes itself the moment
+ * someone picks an option from a dropdown it contains — the selection reads as
+ * a click somewhere else entirely, and the click that was meant to commit a
+ * value tears the panel down instead.
+ *
+ * So every portal root carries `data-constellation-portal`. Any outside-click
+ * handler should treat a hit inside one as INSIDE.
+ */
+const CONSTELLATION_PORTAL_SELECTOR = '[data-constellation-portal]';
+/**
+ * Whether `target` sits inside a Constellation portal.
+ *
+ * Use it to bail out of an outside-click dismissal:
+ *
+ * ```js
+ * const onClick = (e) => {
+ *   if (el.contains(e.target)) return;
+ *   if (isInConstellationPortal(e.target)) return;
+ *   dismiss();
+ * };
+ * ```
+ */
+function isInConstellationPortal(target) {
+    if (!target || !(target instanceof Element))
+        return false;
+    return target.closest(CONSTELLATION_PORTAL_SELECTOR) !== null;
+}
+
+export { CONSTELLATION_PORTAL_SELECTOR, isInConstellationPortal };
+//# sourceMappingURL=portal.js.map

package/dist/utils/portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.js","sources":["../../src/utils/portal.ts"],"sourcesContent":["/**\n * Every Constellation surface that escapes its parent — Select and Combobox\n * panels, DropdownMenu, DatePicker, Tooltip, Dialog, Sheet, the alert stack —\n * renders through a React portal into `document.body`.\n *\n * React events still bubble through the React tree, so an `onClick` on an\n * ancestor component sees them. A NATIVE `document` listener does not: it sees\n * the event at `document.body`, and an `element.contains(event.target)` test\n * against the component that owns the dropdown returns false.\n *\n * That is how a dismiss-on-outside-click container closes itself the moment\n * someone picks an option from a dropdown it contains — the selection reads as\n * a click somewhere else entirely, and the click that was meant to commit a\n * value tears the panel down instead.\n *\n * So every portal root carries `data-constellation-portal`. Any outside-click\n * handler should treat a hit inside one as INSIDE.\n */\nexport const CONSTELLATION_PORTAL_SELECTOR = '[data-constellation-portal]';\n\n/**\n * Whether `target` sits inside a Constellation portal.\n *\n * Use it to bail out of an outside-click dismissal:\n *\n * ```js\n * const onClick = (e) => {\n *   if (el.contains(e.target)) return;\n *   if (isInConstellationPortal(e.target)) return;\n *   dismiss();\n * };\n * ```\n */\nexport function isInConstellationPortal(target: EventTarget | null): boolean {\n  if (!target || !(target instanceof Element)) return false;\n  return target.closest(CONSTELLATION_PORTAL_SELECTOR) !== null;\n}\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,6BAA6B,GAAG;AAE7C;;;;;;;;;;;;AAYG;AACG,SAAU,uBAAuB,CAAC,MAA0B,EAAA;IAChE,IAAI,CAAC,MAAM,IAAI,EAAE,MAAM,YAAY,OAAO,CAAC;AAAE,QAAA,OAAO,KAAK;IACzD,OAAO,MAAM,CAAC,OAAO,CAAC,6BAA6B,CAAC,KAAK,IAAI;AAC/D;;"}

package/dist/utils.d.ts

@@ -1,3 +1,37 @@
 declare const getCsrfToken: () => string;
 
-export { getCsrfToken };
+/**
+ * Every Constellation surface that escapes its parent — Select and Combobox
+ * panels, DropdownMenu, DatePicker, Tooltip, Dialog, Sheet, the alert stack —
+ * renders through a React portal into `document.body`.
+ *
+ * React events still bubble through the React tree, so an `onClick` on an
+ * ancestor component sees them. A NATIVE `document` listener does not: it sees
+ * the event at `document.body`, and an `element.contains(event.target)` test
+ * against the component that owns the dropdown returns false.
+ *
+ * That is how a dismiss-on-outside-click container closes itself the moment
+ * someone picks an option from a dropdown it contains — the selection reads as
+ * a click somewhere else entirely, and the click that was meant to commit a
+ * value tears the panel down instead.
+ *
+ * So every portal root carries `data-constellation-portal`. Any outside-click
+ * handler should treat a hit inside one as INSIDE.
+ */
+declare const CONSTELLATION_PORTAL_SELECTOR = "[data-constellation-portal]";
+/**
+ * Whether `target` sits inside a Constellation portal.
+ *
+ * Use it to bail out of an outside-click dismissal:
+ *
+ * ```js
+ * const onClick = (e) => {
+ *   if (el.contains(e.target)) return;
+ *   if (isInConstellationPortal(e.target)) return;
+ *   dismiss();
+ * };
+ * ```
+ */
+declare function isInConstellationPortal(target: EventTarget | null): boolean;
+
+export { CONSTELLATION_PORTAL_SELECTOR, getCsrfToken, isInConstellationPortal };

package/dist/utils.js

@@ -1,2 +1,3 @@
 export { getCsrfToken } from './utils/csrf.js';
+export { CONSTELLATION_PORTAL_SELECTOR, isInConstellationPortal } from './utils/portal.js';
 //# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"utils.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kismet-ux/constellation",
-  "version": "1.8.0",
+  "version": "1.11.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -147,7 +147,8 @@
     "lint": "eslint . --fix",
     "stylelint": "stylelint \"src/**/*.scss\"",
     "stylelint:fix": "stylelint \"src/**/*.scss\" --fix",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "check:consumed": "node build/check-consumed.mjs"
   },
   "peerDependencies": {
     "lucide-react": ">=0.4.0",

package/src/styles/_mixins.scss

@@ -27,7 +27,12 @@ $themes: primary, secondary, destructive, warning, success, info, slate;
 
 $gap-scale: (
   0: 0,
+  // Half steps for dense rows; see --size-0-5 in _theme.scss. The keys carry a
+  // dash because a class called `.gap-0.5` is not a valid selector, and the
+  // components sanitise `gap={0.5}` to match.
+  '0-5': var(--size-0-5),
   1: var(--size-1),
+  '1-5': var(--size-1-5),
   2: var(--size-2),
   3: var(--size-3),
   4: var(--size-4),
@@ -103,3 +108,28 @@ $breakpoints: (
     }
   }
 }
+
+// Styles that apply when motion should be suppressed.
+//
+// Not just the media query. The app can override the OS with `useMotion`,
+// which writes `data-motion` on <html> — and a media query cannot see a
+// preference held in JavaScript. So this emits both halves: the query, scoped
+// so an explicit "full" wins over it, and the explicit "reduced" case.
+//
+// Include it at the TOP LEVEL and nest the rules inside; the ancestor
+// selectors come from here, so `&` must not appear in the mixin itself.
+//
+//   @include m.reduced-motion {
+//     .thing { transition: none; }
+//   }
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    :root:not([data-motion='full']) {
+      @content;
+    }
+  }
+
+  :root[data-motion='reduced'] {
+    @content;
+  }
+}

package/vite-plugin.mjs

@@ -36,8 +36,9 @@ export default function constellationLocal(options = {}) {
       if (options.root) {
         constellationRoot = resolve(options.root);
       } else {
+        // Directory names, not package names — a sibling checkout.
         const candidates = [
-          resolve(process.cwd(), '../@kismet-ux/constellation'),
+          resolve(process.cwd(), '../kismet-constellation'),
           resolve(process.cwd(), '../constellation'),
           resolve(process.cwd(), 'constellation'),
         ];
@@ -86,7 +87,11 @@ export default function constellationLocal(options = {}) {
         resolve: { alias: aliases },
         server: {
           fs: {
-            allow: [constellationRoot],
+            // The consuming project MUST stay listed. Setting `allow` at all
+            // replaces Vite's default, so returning only the library root
+            // locks the app out of its own source — every module 403s and the
+            // page renders blank.
+            allow: [process.cwd(), constellationRoot],
           },
         },
       };