@zeyos/zx 2.3.0 → 3.0.0

package/src/core/position.js

@@ -2,12 +2,15 @@
 import { clamp, uid } from './util.js';
 
 const PLACEMENTS = new Set([
-  'bottom-start', 'bottom-end', 'top-start', 'top-end', 'bottom', 'top'
+  'bottom-start', 'bottom-end', 'top-start', 'top-end', 'bottom', 'top',
+  'right-start', 'right-end', 'left-start', 'left-end', 'right', 'left'
 ]);
 
+/** @typedef {'bottom-start'|'bottom-end'|'top-start'|'top-end'|'bottom'|'top'|'right-start'|'right-end'|'left-start'|'left-end'|'right'|'left'} Placement */
+
 /**
  * @typedef {Object} PositionOptions
- * @property {'bottom-start'|'bottom-end'|'top-start'|'top-end'|'bottom'|'top'} [placement='bottom-start']
+ * @property {'bottom-start'|'bottom-end'|'top-start'|'top-end'|'bottom'|'top'|'right-start'|'right-end'|'left-start'|'left-end'|'right'|'left'} [placement='bottom-start']
  * @property {number} [offset=4] Gap between anchor and floating element.
  * @property {boolean} [flip=true] Flip vertically when the preferred side overflows.
  * @property {boolean} [matchWidth=false] Set the floating element's minimum width to the anchor width.
@@ -50,13 +53,17 @@ export function position(anchor, floating, options = {}) {
     floating.style.inset = 'auto';
     floating.style.margin = '0';
     floating.style.setProperty('position-anchor', anchorName);
-    floating.style.setProperty('position-area', positionArea(placement));
-    floating.style.setProperty('inset-area', positionArea(placement));
+    const area = positionArea(placement, getComputedStyle(anchor).direction === 'rtl');
+    floating.style.setProperty('position-area', area);
+    floating.style.setProperty('inset-area', area);
     floating.style.setProperty(
       'position-try-fallbacks',
       flip ? 'flip-block, flip-inline, flip-block flip-inline' : 'none'
     );
-    floating.style.setProperty(placement.startsWith('top') ? 'margin-block-end' : 'margin-block-start', `${offset}px`);
+    const margin = placement.startsWith('top') ? 'margin-bottom'
+      : placement.startsWith('bottom') ? 'margin-top'
+        : placement.startsWith('left') ? 'margin-right' : 'margin-left';
+    floating.style.setProperty(margin, `${offset}px`);
     update = () => {
       if (matchWidth) floating.style.minWidth = `${anchor.getBoundingClientRect().width}px`;
     };
@@ -104,15 +111,21 @@ export function position(anchor, floating, options = {}) {
   };
 }
 
-/** @param {string} placement @returns {string} */
-function positionArea(placement) {
+/** @param {string} placement @param {boolean} rtl @returns {string} */
+function positionArea(placement, rtl) {
   return {
-    'bottom-start': 'block-end span-inline-end',
-    'bottom-end': 'block-end span-inline-start',
-    'top-start': 'block-start span-inline-end',
-    'top-end': 'block-start span-inline-start',
-    bottom: 'block-end',
-    top: 'block-start'
+    'bottom-start': rtl ? 'bottom span-left' : 'bottom span-right',
+    'bottom-end': rtl ? 'bottom span-right' : 'bottom span-left',
+    'top-start': rtl ? 'top span-left' : 'top span-right',
+    'top-end': rtl ? 'top span-right' : 'top span-left',
+    'right-start': 'right span-bottom',
+    'right-end': 'right span-top',
+    'left-start': 'left span-bottom',
+    'left-end': 'left span-top',
+    bottom: 'bottom',
+    top: 'top',
+    right: 'right',
+    left: 'left'
   }[placement];
 }
 
@@ -129,27 +142,60 @@ function updateFallback(anchor, floating, { placement, offset, flip, matchWidth
   const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
   const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
   let actualPlacement = placement;
-  const prefersBottom = placement.startsWith('bottom');
+  const side = placementSide(placement);
   const bottomY = anchorRect.bottom + offset;
   const topY = anchorRect.top - offset - floatingRect.height;
+  const rightX = anchorRect.right + offset;
+  const leftX = anchorRect.left - offset - floatingRect.width;
 
   if (flip) {
-    if (prefersBottom && bottomY + floatingRect.height > viewportHeight && topY >= 0) {
-      actualPlacement = /** @type {typeof placement} */ (placement.replace('bottom', 'top'));
-    } else if (!prefersBottom && topY < 0 && bottomY + floatingRect.height <= viewportHeight) {
-      actualPlacement = /** @type {typeof placement} */ (placement.replace('top', 'bottom'));
+    if (side === 'bottom' && bottomY + floatingRect.height > viewportHeight && topY >= 0) {
+      actualPlacement = flipPlacement(placement, 'bottom', 'top');
+    } else if (side === 'top' && topY < 0 && bottomY + floatingRect.height <= viewportHeight) {
+      actualPlacement = flipPlacement(placement, 'top', 'bottom');
+    } else if (side === 'right' && rightX + floatingRect.width > viewportWidth && leftX >= 0) {
+      actualPlacement = flipPlacement(placement, 'right', 'left');
+    } else if (side === 'left' && leftX < 0 && rightX + floatingRect.width <= viewportWidth) {
+      actualPlacement = flipPlacement(placement, 'left', 'right');
     }
   }
 
+  const actualSide = placementSide(actualPlacement);
   let left;
-  if (actualPlacement.endsWith('-end')) left = anchorRect.right - floatingRect.width;
-  else if (actualPlacement.endsWith('-start')) left = anchorRect.left;
-  else left = anchorRect.left + (anchorRect.width - floatingRect.width) / 2;
-  const top = actualPlacement.startsWith('bottom') ? bottomY : topY;
+  let top;
+  if (actualSide === 'bottom' || actualSide === 'top') {
+    const rtl = getComputedStyle(anchor).direction === 'rtl';
+    if (actualPlacement.endsWith('-end')) {
+      left = rtl ? anchorRect.left : anchorRect.right - floatingRect.width;
+    } else if (actualPlacement.endsWith('-start')) {
+      left = rtl ? anchorRect.right - floatingRect.width : anchorRect.left;
+    } else left = anchorRect.left + (anchorRect.width - floatingRect.width) / 2;
+    top = actualSide === 'bottom' ? bottomY : topY;
+  } else {
+    left = actualSide === 'right' ? rightX : leftX;
+    if (actualPlacement.endsWith('-end')) top = anchorRect.bottom - floatingRect.height;
+    else if (actualPlacement.endsWith('-start')) top = anchorRect.top;
+    else top = anchorRect.top + (anchorRect.height - floatingRect.height) / 2;
+  }
   floating.style.left = `${Math.round(clamp(left, 0, Math.max(0, viewportWidth - floatingRect.width)))}px`;
   floating.style.top = `${Math.round(clamp(top, 0, Math.max(0, viewportHeight - floatingRect.height)))}px`;
 }
 
+/** @param {string} placement @returns {'top'|'bottom'|'left'|'right'} */
+function placementSide(placement) {
+  return /** @type {'top'|'bottom'|'left'|'right'} */ (placement.split('-')[0]);
+}
+
+/**
+ * @param {string} placement
+ * @param {'top'|'bottom'|'left'|'right'} from
+ * @param {'top'|'bottom'|'left'|'right'} to
+ * @returns {Placement}
+ */
+function flipPlacement(placement, from, to) {
+  return /** @type {Placement} */ (placement.replace(from, to));
+}
+
 /** @param {HTMLElement} element @returns {void} */
 function showPopover(element) {
   if (typeof element.showPopover !== 'function') return;

package/src/index.js

@@ -42,7 +42,12 @@ export function registerFieldAdapters() {
 registerFieldAdapters();
 
 export { Component } from './core/component.js';
-export { h, htmlEscape, resolveElement, highlightMatch } from './core/dom.js';
+export {
+  h, htmlEscape, resolveElement, highlightMatch,
+  __, compactElement, fragment, parseCompactTag, applyCompactProperties,
+  appendContent, appendCompact, appendCompactChild,
+  onCompactEvent, offCompactEvent, fireCompactEvent
+} from './core/dom.js';
 export { position } from './core/position.js';
 export { breakpoints, breakpointOf, matchBreakpoint, onBreakpoint } from './core/breakpoint.js';
 export { Http, zeyosService, parseResult } from './core/http.js';
@@ -88,15 +93,23 @@ export { MasterPanel } from './components/master-panel/master-panel.js';
 export {
   SplitView, clampSize, resolveSize, snapSize
 } from './components/split-view/split-view.js';
+export { Dock } from './components/dock/dock.js';
 export { Tabbox } from './components/tabbox/tabbox.js';
 export { NavigationBar } from './components/navigation-bar/navigation-bar.js';
 export { Stepper } from './components/stepper/stepper.js';
 export { Breadcrumb } from './components/breadcrumb/breadcrumb.js';
 export { Pagination, paginationRange } from './components/pagination/pagination.js';
 export { Search } from './components/search/search.js';
+export { Launcher, rankLauncherItems } from './components/launcher/launcher.js';
+export { Avatar, avatarInitials } from './components/avatar/avatar.js';
+export { AccountMenu } from './components/account-menu/account-menu.js';
+export { AppRail, normalizeAppItems } from './components/app-rail/app-rail.js';
+export { AppSidebar } from './components/app-sidebar/app-sidebar.js';
 export { Message } from './components/message/message.js';
 export { Modal } from './components/modal/modal.js';
 export { Dialog } from './components/dialog/dialog.js';
+export { Sheet } from './components/sheet/sheet.js';
+export { SheetStack } from './components/sheet/sheet-stack.js';
 export { Dropdown } from './components/dropdown/dropdown.js';
 export { Tooltip, tooltip, describe } from './components/tooltip/tooltip.js';
 export { MenuButton } from './components/menu-button/menu-button.js';
@@ -107,7 +120,6 @@ export { TagPicker } from './components/tag-picker/tag-picker.js';
 export { NumberField, parseNumber, snapNumber } from './components/number-field/number-field.js';
 export { Rating } from './components/rating/rating.js';
 export { Slider, stepPrecision } from './components/slider/slider.js';
-export { Permission } from './components/permission/permission.js';
 export { DatePicker } from './components/date-picker/date-picker.js';
 export { MonthPicker } from './components/date-picker/month-picker.js';
 export { TimePicker } from './components/date-picker/time-picker.js';
@@ -120,12 +132,17 @@ export {
 } from './components/datebox/date-range-box.js';
 export { Timebox, splitTime, joinTime } from './components/timebox/timebox.js';
 export { Table } from './components/table/table.js';
+export { Grid, billingColumns, isBillingLine } from './components/grid/grid.js';
+export {
+  Chart, ChartJsAdapter, chartSummaryTable, cloneChartValue, isEmptyChartData
+} from './components/chart/chart.js';
 export { TreeView } from './components/tree/tree.js';
 export { Finder } from './components/finder/finder.js';
 export { DataFilter } from './components/data-filter/data-filter.js';
 export { Field } from './components/field/field.js';
 export { Fieldset } from './components/fieldset/fieldset.js';
 export { Form } from './components/form/form.js';
+export { Questionnaire } from './components/questionnaire/questionnaire.js';
 export { ValueList } from './components/value-list/value-list.js';
 export { MultiValueEditor } from './components/multi-value-editor/multi-value-editor.js';
 export { FieldUpload } from './components/field-upload/field-upload.js';

package/styles/tokens/dark.css

@@ -1,7 +1,6 @@
 /*
- * Tier-2 semantic tokens — dark theme, from the shadcn/ui preset `b2BVl11e4` (Zinc):
- * Zinc-950 page, Zinc-900 cards and popovers, Zinc-800 muted fills, translucent white borders
- * (10%) and inputs (15%), Zinc-400 muted text.
+ * Tier-2 semantic tokens — dark theme: a near-black page, raised neutral surfaces, muted fills,
+ * translucent white borders (10%) and inputs (15%), and restrained secondary text.
  *
  * The accent roles take the light end of the `--zx-accent-*` ramp (300/400/500) where the light
  * theme takes the dark end, so a preset that repoints the ramp lands correctly in both.

package/styles/tokens/global.css

@@ -1,9 +1,9 @@
 /*
  * Tier-1 palette and primitives.
  *
- * Derived from the shadcn/ui preset `b2BVl11e4` (style Nova · base colour Zinc · theme Zinc ·
- * chart colour Emerald · Inter · radius small). The neutral ramp is Tailwind Zinc; the accent
- * ramp is the preset's Emerald chart ramp, anchored at 400 to the ZeyOS brand green #21cc75.
+ * The neutral ramp uses Zinc-like values; the accent ramp uses an emerald progression anchored at
+ * 400 to the ZeyOS brand green #21cc75. Inter and a compact radius scale support dense business
+ * interfaces without coupling the token contract to another UI toolkit.
  *
  * Only tier-2 semantic tokens (tokens/semantic.css, tokens/dark.css) may reference these.
  * Component CSS must never use them directly — tests/lint-tokens.js enforces that.
@@ -24,7 +24,7 @@
   --zx-gray-900: #18181b;
   --zx-gray-950: #09090b;
 
-  /* Accent — the preset's Emerald chart ramp, with the ZeyOS brand green at 400 */
+  /* Accent — an emerald ramp with the ZeyOS brand green at 400 */
   --zx-green-300: #5ee9b5;
   --zx-green-400: #21cc75;
   --zx-green-500: #009966;
@@ -63,7 +63,7 @@
   --zx-space-7: 32px;
   --zx-space-8: 40px;
 
-  /* Radius — the preset's `--radius: 0.45rem`, with shadcn's derived steps */
+  /* Radius — a 0.45rem base with compact derived steps */
   --zx-radius: 0.45rem;
   --zx-radius-sm: calc(var(--zx-radius) - 4px);
   --zx-radius-md: calc(var(--zx-radius) - 2px);

package/styles/tokens/semantic.css

@@ -1,9 +1,9 @@
 /*
  * Tier-2 semantic tokens — light theme (the default).
  *
- * The mapping follows the shadcn/ui preset `b2BVl11e4`: white surfaces, Zinc-100 hover/muted
- * fills, Zinc-200 borders and inputs, Zinc-500 muted text, Zinc-950 body text, and the Nova
- * control geometry (32px controls, `--radius` corners, a 3px translucent focus ring).
+ * The mapping uses white surfaces, restrained neutral hover/muted fills, quiet borders and inputs,
+ * strong body text, and compact control geometry (32px controls, `--radius` corners, a 3px
+ * translucent focus ring).
  *
  * The accent roles read `--zx-accent-*` rather than the green ramp directly, which is what lets
  * `tokens/themes.css` retheme them. Status colours keep their own ramps on purpose — see the note
@@ -48,6 +48,8 @@
   --zx-control-font-size: var(--zx-text-md);
   --zx-control-font-weight: 500;
   --zx-overlay-shadow: var(--zx-shadow-3);
+  /* Blur applied behind a backdrop that asked for it. Theme-independent, so light defines it once. */
+  --zx-overlay-blur: 8px;
   --zx-header-bg: var(--zx-gray-900);
   --zx-header-text: var(--zx-gray-50);
 }

package/styles/tokens/themes.css

@@ -17,7 +17,7 @@
  * against the dark page, which is what keeps `--zx-color-on-accent` correct in both polarities.
  */
 
-/* Zx — the ZeyOS brand green on the shadcn Emerald ramp. The default. */
+/* Zx — the ZeyOS brand green on Xenon's emerald ramp. The default. */
 [data-zx-preset="zx"] {
   --zx-accent-300: #5ee9b5;
   --zx-accent-400: #21cc75;

package/styles/zx.css

@@ -26,12 +26,19 @@
 @import url("../src/components/tabbox/tabbox.css");
 @import url("../src/components/navigation-bar/navigation-bar.css");
 @import url("../src/components/search/search.css");
+@import url("../src/components/launcher/launcher.css");
+@import url("../src/components/avatar/avatar.css");
+@import url("../src/components/account-menu/account-menu.css");
+@import url("../src/components/app-rail/app-rail.css");
+@import url("../src/components/app-sidebar/app-sidebar.css");
 @import url("../src/components/message/message.css");
 @import url("../src/components/modal/modal.css");
 @import url("../src/components/dialog/dialog.css");
+@import url("../src/components/sheet/sheet.css");
 @import url("../src/components/dropdown/dropdown.css");
 @import url("../src/components/tooltip/tooltip.css");
 @import url("../src/components/split-view/split-view.css");
+@import url("../src/components/dock/dock.css");
 @import url("../src/components/menu-button/menu-button.css");
 @import url("../src/components/context-menu/context-menu.css");
 @import url("../src/components/select/select.css");
@@ -40,7 +47,6 @@
 @import url("../src/components/number-field/number-field.css");
 @import url("../src/components/slider/slider.css");
 @import url("../src/components/rating/rating.css");
-@import url("../src/components/permission/permission.css");
 @import url("../src/components/date-picker/date-picker.css");
 @import url("../src/components/date-picker/time-picker.css");
 @import url("../src/components/datebox/datebox.css");
@@ -48,6 +54,8 @@
 @import url("../src/components/datebox/date-range-box.css");
 @import url("../src/components/timebox/timebox.css");
 @import url("../src/components/table/table.css");
+@import url("../src/components/grid/grid.css");
+@import url("../src/components/chart/chart.css");
 @import url("../src/components/tree/tree.css");
 @import url("../src/components/finder/finder.css");
 @import url("../src/components/data-filter/data-filter.css");
@@ -60,3 +68,4 @@
 @import url("../src/components/value-list/value-list.css");
 @import url("../src/components/multi-value-editor/multi-value-editor.css");
 @import url("../src/components/field-upload/field-upload.css");
+@import url("../src/components/questionnaire/questionnaire.css");

package/dist/types/components/permission/permission.d.ts

@@ -1,96 +0,0 @@
-import { Component } from '../../core/component.js';
-import { Select } from '../select/select.js';
-export type PermissionGroup = Record<string, any> | string | number | boolean | symbol | bigint | null | undefined;
-export type PermissionOptions = {
-    /**
-     * Public, private, or group ID.
-     */
-    value?: boolean | string | number | symbol | bigint | null;
-    /**
-     * Available groups.
-     */
-    groups?: PermissionGroup[];
-    /**
-     * Group ID property or reader.
-     */
-    groupsValueKey?: string | ((item: PermissionGroup) => unknown);
-    /**
-     * Group label property or reader.
-     */
-    groupsLabelKey?: string | ((item: PermissionGroup) => string);
-    /**
-     * Localized messages.
-     */
-    msg?: Record<string, string> | Record<string, Record<string, string>>;
-    /**
-     * Change listener.
-     */
-    onchange?: (event: CustomEvent<PermissionChangeDetail>) => void;
-};
-export type PermissionChangeDetail = {
-    value: unknown;
-};
-/** @typedef {Record<string, any>|string|number|boolean|symbol|bigint|null|undefined} PermissionGroup */
-/**
- * @typedef {Object} PermissionOptions
- * @property {boolean|string|number|symbol|bigint|null} [value=true] Public, private, or group ID.
- * @property {PermissionGroup[]} [groups=[]] Available groups.
- * @property {string|((item: PermissionGroup) => unknown)} [groupsValueKey='ID'] Group ID property or reader.
- * @property {string|((item: PermissionGroup) => string)} [groupsLabelKey='name'] Group label property or reader.
- * @property {Record<string, string>|Record<string, Record<string, string>>} [msg] Localized messages.
- * @property {(event: CustomEvent<PermissionChangeDetail>) => void} [onchange] Change listener.
- */
-/** @typedef {{value: unknown}} PermissionChangeDetail */
-/**
- * Record-permission choice for private, public, and group access.
- *
- * @deprecated Use `Select.permission(target, {groups})`, which carries the same tri-state value in
- * one control and accepts a loader function for installations whose group list is too long to ship
- * with the form. This class stays for `gx.zeyos.Permission` and will be removed in 3.0.
- * @fires Permission#change
- * @extends {Component<PermissionOptions>}
- */
-export declare class Permission extends Component<PermissionOptions> {
-    _mode: string;
-    _groupValue: any;
-    _groupSelect: Select;
-    _createdRoot: boolean;
-    _originalChildren: any[] | ChildNode[];
-    _root: HTMLElement;
-    _originalState: string;
-    static cssName: string;
-    /** @type {PermissionOptions} */
-    static defaults: PermissionOptions;
-    /** @returns {HTMLElement} */
-    render(): HTMLElement;
-    /** Returns the normalized permission value. @returns {'private'|'public'|unknown} */
-    get(): 'private' | 'public' | unknown;
-    /**
-     * Sets a public, private, or group permission.
-     * @param {boolean|string|number|symbol|bigint|null} value Permission value.
-     * @param {{silent?: boolean}} [options={}] Update behavior.
-     * @returns {this}
-     * @fires Permission#change
-     */
-    set(value: boolean | string | number | symbol | bigint | null, { silent }?: {
-        silent?: boolean;
-    }): this;
-    /** Destroys the embedded Select and restores an enhanced target. @returns {void} */
-    destroy(): void;
-    /** @returns {void} */
-    _selectGroupMode(): void;
-    /** @returns {void} */
-    _sync(): void;
-    /**
-     * @param {string} name
-     * @param {'private'|'public'|'group'} value
-     * @param {string} text
-     * @returns {{label: HTMLLabelElement, input: HTMLInputElement}}
-     */
-    _choice(name: string, value: 'private' | 'public' | 'group', text: string): {
-        label: HTMLLabelElement;
-        input: HTMLInputElement;
-    };
-    /** @param {string} key @param {string} fallback @returns {string} */
-    _message(key: string, fallback: string): string;
-}

package/src/components/permission/permission.css

@@ -1,47 +0,0 @@
-.zx-permission {
-  min-inline-size: 0;
-  color: var(--zx-color-text);
-  font-size: var(--zx-control-font-size);
-}
-
-.zx-permission__choices {
-  display: grid;
-  grid-template-columns: repeat(3, max-content) minmax(160px, 1fr);
-  align-items: center;
-  gap: var(--zx-space-2) var(--zx-space-4);
-}
-
-.zx-permission__choice {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--zx-space-2);
-  min-block-size: var(--zx-control-height);
-  cursor: pointer;
-}
-
-.zx-permission__choice input {
-  accent-color: var(--zx-color-accent);
-}
-
-.zx-permission__choice:has(input:focus-visible) {
-  border-radius: var(--zx-radius-sm);
-  box-shadow: var(--zx-focus-ring);
-}
-
-.zx-permission__groups {
-  min-inline-size: 160px;
-}
-
-.zx-permission:not([data-state="group"]) .zx-permission__groups {
-  color: var(--zx-color-text-muted);
-}
-
-@media (max-width: 640px) {
-  .zx-permission__choices {
-    grid-template-columns: 1fr;
-  }
-
-  .zx-permission__groups {
-    inline-size: 100%;
-  }
-}