origam 2.2.1 → 2.3.0

package/dist/src/components/index.d.ts

@@ -4,6 +4,7 @@ export * from './App';
 export * from './Avatar';
 export * from './Badge';
 export * from './BottomNav';
+export * from './Bracket';
 export * from './Breadcrumb';
 export * from './Btn';
 export * from './ItemGroup';
@@ -11,8 +12,11 @@ export * from './Card';
 export * from './Carousel';
 export * from './Checkbox';
 export * from './Chip';
+export * from './ClientOnly';
+export * from './Code';
 export * from './ColorPicker';
 export * from './ColorPickerField';
+export * from './CommandPalette';
 export * from './ConfirmWrapper';
 export * from './ContextualMenu';
 export * from './Counter';
@@ -59,9 +63,11 @@ export * from './Sheet';
 export * from './Slide';
 export * from './SliderField';
 export * from './Snackbar';
+export * from './SnackbarStack';
 export * from './Switch';
 export * from './SystemBar';
 export * from './Table';
+export * from './Tabs';
 export * from './TextareaField';
 export * from './TextField';
 export * from './ThemeProvider';

package/dist/src/components/index.js

@@ -4,6 +4,7 @@ export * from "./App/index.js";
 export * from "./Avatar/index.js";
 export * from "./Badge/index.js";
 export * from "./BottomNav/index.js";
+export * from "./Bracket/index.js";
 export * from "./Breadcrumb/index.js";
 export * from "./Btn/index.js";
 export * from "./ItemGroup/index.js";
@@ -11,8 +12,11 @@ export * from "./Card/index.js";
 export * from "./Carousel/index.js";
 export * from "./Checkbox/index.js";
 export * from "./Chip/index.js";
+export * from "./ClientOnly/index.js";
+export * from "./Code/index.js";
 export * from "./ColorPicker/index.js";
 export * from "./ColorPickerField/index.js";
+export * from "./CommandPalette/index.js";
 export * from "./ConfirmWrapper/index.js";
 export * from "./ContextualMenu/index.js";
 export * from "./Counter/index.js";
@@ -59,9 +63,11 @@ export * from "./Sheet/index.js";
 export * from "./Slide/index.js";
 export * from "./SliderField/index.js";
 export * from "./Snackbar/index.js";
+export * from "./SnackbarStack/index.js";
 export * from "./Switch/index.js";
 export * from "./SystemBar/index.js";
 export * from "./Table/index.js";
+export * from "./Tabs/index.js";
 export * from "./TextareaField/index.js";
 export * from "./TextField/index.js";
 export * from "./ThemeProvider/index.js";

package/dist/src/composables/Code/code.composable.cjs

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resetCodeHighlighterForTesting = resetCodeHighlighterForTesting;
+exports.useCode = useCode;
+var _consts = require("../../consts/index.cjs");
+var _enums = require("../../enums/index.cjs");
+let _highlighterPromise = null;
+let _highlighterReady = false;
+const _cache = /* @__PURE__ */new Map();
+let _unsupportedLangWarned = /* @__PURE__ */new Set();
+function makeCacheKey(code, lang, theme) {
+  return `${theme}::${lang}::${code}`;
+}
+function lruGet(key) {
+  const hit = _cache.get(key);
+  if (hit === void 0) return void 0;
+  _cache.delete(key);
+  _cache.set(key, hit);
+  return hit;
+}
+function lruSet(key, value) {
+  if (_cache.size >= _consts.CODE_CACHE_MAX_ENTRIES) {
+    const oldest = _cache.keys().next().value;
+    if (oldest !== void 0) _cache.delete(oldest);
+  }
+  _cache.set(key, value);
+}
+async function loadHighlighter() {
+  if (_highlighterPromise) return _highlighterPromise;
+  _highlighterPromise = (async () => {
+    const shiki = await Promise.resolve().then(() => require("shiki"));
+    const highlighter = await shiki.createHighlighter({
+      themes: [_consts.CODE_SHIKI_THEMES.light, _consts.CODE_SHIKI_THEMES.dark],
+      langs: [..._consts.SUPPORTED_LANGS]
+    });
+    _highlighterReady = true;
+    return highlighter;
+  })();
+  return _highlighterPromise;
+}
+function resolveLang(lang) {
+  if (_consts.SUPPORTED_LANGS.includes(lang)) return lang;
+  if (!_unsupportedLangWarned.has(lang)) {
+    _unsupportedLangWarned.add(lang);
+    console.warn(`[origam] OrigamCode: lang="${lang}" is not in the bundled grammar set. Falling back to "${_enums.CODE_LANG.PLAINTEXT}". Supported: ${_consts.SUPPORTED_LANGS.join(", ")}.`);
+  }
+  return _enums.CODE_LANG.PLAINTEXT;
+}
+function useCode() {
+  async function highlight(code, lang, themeName) {
+    const resolvedLang = resolveLang(lang);
+    const shikiTheme = themeName === "dark" ? _consts.CODE_SHIKI_THEMES.dark : _consts.CODE_SHIKI_THEMES.light;
+    const key = makeCacheKey(code, resolvedLang, shikiTheme);
+    const cached = lruGet(key);
+    if (cached !== void 0) return cached;
+    const highlighter = await loadHighlighter();
+    let html;
+    try {
+      html = highlighter.codeToHtml(code, {
+        lang: resolvedLang,
+        theme: shikiTheme
+      });
+    } catch (err) {
+      console.warn("[origam] OrigamCode: shiki failed to tokenise, falling back to plaintext.", err);
+      html = highlighter.codeToHtml(code, {
+        lang: _enums.CODE_LANG.PLAINTEXT,
+        theme: shikiTheme
+      });
+    }
+    lruSet(key, html);
+    return html;
+  }
+  async function prime() {
+    await loadHighlighter();
+  }
+  function isReady() {
+    return _highlighterReady;
+  }
+  function resetCacheForTesting() {
+    _cache.clear();
+    _unsupportedLangWarned = /* @__PURE__ */new Set();
+  }
+  return {
+    highlight,
+    prime,
+    isReady,
+    resetCacheForTesting
+  };
+}
+function resetCodeHighlighterForTesting() {
+  _highlighterPromise = null;
+  _highlighterReady = false;
+  _cache.clear();
+  _unsupportedLangWarned = /* @__PURE__ */new Set();
+}

package/dist/src/composables/Code/code.composable.d.ts

@@ -0,0 +1,10 @@
+import type { IUseCodeReturn } from '../../interfaces';
+/**
+ * Public hook — see `IUseCodeReturn` for the surface contract.
+ */
+export declare function useCode(): IUseCodeReturn;
+/**
+ * Test-only: drop the singleton so a fresh dynamic import runs next call.
+ * Production code should never need this.
+ */
+export declare function resetCodeHighlighterForTesting(): void;

package/dist/src/composables/Code/code.composable.js

@@ -0,0 +1,82 @@
+import { CODE_CACHE_MAX_ENTRIES, CODE_SHIKI_THEMES, SUPPORTED_LANGS } from "../../consts/index.js";
+import { CODE_LANG } from "../../enums/index.js";
+let _highlighterPromise = null;
+let _highlighterReady = false;
+const _cache = /* @__PURE__ */ new Map();
+let _unsupportedLangWarned = /* @__PURE__ */ new Set();
+function makeCacheKey(code, lang, theme) {
+  return `${theme}::${lang}::${code}`;
+}
+function lruGet(key) {
+  const hit = _cache.get(key);
+  if (hit === void 0) return void 0;
+  _cache.delete(key);
+  _cache.set(key, hit);
+  return hit;
+}
+function lruSet(key, value) {
+  if (_cache.size >= CODE_CACHE_MAX_ENTRIES) {
+    const oldest = _cache.keys().next().value;
+    if (oldest !== void 0) _cache.delete(oldest);
+  }
+  _cache.set(key, value);
+}
+async function loadHighlighter() {
+  if (_highlighterPromise) return _highlighterPromise;
+  _highlighterPromise = (async () => {
+    const shiki = await import("shiki");
+    const highlighter = await shiki.createHighlighter({
+      themes: [CODE_SHIKI_THEMES.light, CODE_SHIKI_THEMES.dark],
+      langs: [...SUPPORTED_LANGS]
+    });
+    _highlighterReady = true;
+    return highlighter;
+  })();
+  return _highlighterPromise;
+}
+function resolveLang(lang) {
+  if (SUPPORTED_LANGS.includes(lang)) return lang;
+  if (!_unsupportedLangWarned.has(lang)) {
+    _unsupportedLangWarned.add(lang);
+    console.warn(
+      `[origam] OrigamCode: lang="${lang}" is not in the bundled grammar set. Falling back to "${CODE_LANG.PLAINTEXT}". Supported: ${SUPPORTED_LANGS.join(", ")}.`
+    );
+  }
+  return CODE_LANG.PLAINTEXT;
+}
+export function useCode() {
+  async function highlight(code, lang, themeName) {
+    const resolvedLang = resolveLang(lang);
+    const shikiTheme = themeName === "dark" ? CODE_SHIKI_THEMES.dark : CODE_SHIKI_THEMES.light;
+    const key = makeCacheKey(code, resolvedLang, shikiTheme);
+    const cached = lruGet(key);
+    if (cached !== void 0) return cached;
+    const highlighter = await loadHighlighter();
+    let html;
+    try {
+      html = highlighter.codeToHtml(code, { lang: resolvedLang, theme: shikiTheme });
+    } catch (err) {
+      console.warn("[origam] OrigamCode: shiki failed to tokenise, falling back to plaintext.", err);
+      html = highlighter.codeToHtml(code, { lang: CODE_LANG.PLAINTEXT, theme: shikiTheme });
+    }
+    lruSet(key, html);
+    return html;
+  }
+  async function prime() {
+    await loadHighlighter();
+  }
+  function isReady() {
+    return _highlighterReady;
+  }
+  function resetCacheForTesting() {
+    _cache.clear();
+    _unsupportedLangWarned = /* @__PURE__ */ new Set();
+  }
+  return { highlight, prime, isReady, resetCacheForTesting };
+}
+export function resetCodeHighlighterForTesting() {
+  _highlighterPromise = null;
+  _highlighterReady = false;
+  _cache.clear();
+  _unsupportedLangWarned = /* @__PURE__ */ new Set();
+}

package/dist/src/composables/CommandPalette/command.composable.cjs

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resetCommandRegistryForTesting = resetCommandRegistryForTesting;
+exports.useCommand = useCommand;
+var _vue = require("vue");
+var _utils = require("../../utils/index.cjs");
+const REGISTRY = {
+  items: (0, _vue.ref)([]),
+  isOpen: (0, _vue.ref)(false)
+};
+const upsert = cmd => {
+  const idx = REGISTRY.items.value.findIndex(item => item.id === cmd.id);
+  if (idx === -1) {
+    REGISTRY.items.value.push(cmd);
+  } else {
+    REGISTRY.items.value.splice(idx, 1, cmd);
+  }
+};
+const removeById = id => {
+  const idx = REGISTRY.items.value.findIndex(item => item.id === id);
+  if (idx !== -1) REGISTRY.items.value.splice(idx, 1);
+};
+function useCommand() {
+  const register = cmd => {
+    upsert(cmd);
+    const dispose = () => removeById(cmd.id);
+    (0, _utils.tryOnScopeDispose)(dispose);
+    return dispose;
+  };
+  const unregister = id => removeById(id);
+  const commands = (0, _vue.computed)(() => REGISTRY.items.value);
+  const open = () => {
+    REGISTRY.isOpen.value = true;
+  };
+  const close = () => {
+    REGISTRY.isOpen.value = false;
+  };
+  return {
+    register,
+    unregister,
+    commands,
+    open,
+    close,
+    isOpen: REGISTRY.isOpen
+  };
+}
+function resetCommandRegistryForTesting() {
+  REGISTRY.items.value = [];
+  REGISTRY.isOpen.value = false;
+}

package/dist/src/composables/CommandPalette/command.composable.d.ts

@@ -0,0 +1,37 @@
+import { type ComputedRef, type Ref } from 'vue';
+import type { ICommand } from '../../interfaces';
+/*********************************************************
+ * useCommand
+ ********************************************************/
+export interface IUseCommandReturn {
+    /**
+     * Register a command. Returns an `unregister()` closure so callers
+     * can drop the entry imperatively. When called from inside a Vue
+     * effect scope, the entry is auto-unregistered on scope dispose
+     * (component unmount, route leave, …) via `tryOnScopeDispose`.
+     */
+    register: (cmd: ICommand) => () => void;
+    /** Drop the entry with the matching `id`. No-op if unknown. */
+    unregister: (id: string) => void;
+    /**
+     * Reactive read-only view of every registered command, deduplicated
+     * by id.
+     */
+    commands: ComputedRef<ReadonlyArray<ICommand>>;
+    /** Open the global palette singleton. */
+    open: () => void;
+    /** Close the global palette singleton. */
+    close: () => void;
+    /** Reactive open/close state of the global palette singleton. */
+    isOpen: Ref<boolean>;
+}
+export declare function useCommand(): IUseCommandReturn;
+/*********************************************************
+ * Test helper
+ *
+ * @description
+ * Vitest needs to wipe the singleton between specs so the registry
+ * does not leak between cases. Not part of the public surface — do
+ * not import in product code.
+ ********************************************************/
+export declare function resetCommandRegistryForTesting(): void;

package/dist/src/composables/CommandPalette/command.composable.js

@@ -0,0 +1,46 @@
+import { computed, ref } from "vue";
+import { tryOnScopeDispose } from "../../utils/index.js";
+const REGISTRY = {
+  items: ref([]),
+  isOpen: ref(false)
+};
+const upsert = (cmd) => {
+  const idx = REGISTRY.items.value.findIndex((item) => item.id === cmd.id);
+  if (idx === -1) {
+    REGISTRY.items.value.push(cmd);
+  } else {
+    REGISTRY.items.value.splice(idx, 1, cmd);
+  }
+};
+const removeById = (id) => {
+  const idx = REGISTRY.items.value.findIndex((item) => item.id === id);
+  if (idx !== -1) REGISTRY.items.value.splice(idx, 1);
+};
+export function useCommand() {
+  const register = (cmd) => {
+    upsert(cmd);
+    const dispose = () => removeById(cmd.id);
+    tryOnScopeDispose(dispose);
+    return dispose;
+  };
+  const unregister = (id) => removeById(id);
+  const commands = computed(() => REGISTRY.items.value);
+  const open = () => {
+    REGISTRY.isOpen.value = true;
+  };
+  const close = () => {
+    REGISTRY.isOpen.value = false;
+  };
+  return {
+    register,
+    unregister,
+    commands,
+    open,
+    close,
+    isOpen: REGISTRY.isOpen
+  };
+}
+export function resetCommandRegistryForTesting() {
+  REGISTRY.items.value = [];
+  REGISTRY.isOpen.value = false;
+}

package/dist/src/composables/Commons/virtual.composable.cjs

@@ -30,6 +30,7 @@ function useVirtual(props, items) {
     resizeRef.value = containerRef.value;
   });
   const viewportHeight = (0, _vue.computed)(() => {
+    if (!_consts.IN_BROWSER) return (0, _utils.int)(props.height) || 0;
     return containerRef.value === document.documentElement ? display.height.value : contentRect.value?.height || (0, _utils.int)(props.height) || 0;
   });
   const hasInitialRender = (0, _vue.computed)(() => {

package/dist/src/composables/Commons/virtual.composable.js

@@ -21,6 +21,7 @@ export function useVirtual(props, items) {
     resizeRef.value = containerRef.value;
   });
   const viewportHeight = computed(() => {
+    if (!IN_BROWSER) return int(props.height) || 0;
     return containerRef.value === document.documentElement ? display.height.value : contentRect.value?.height || int(props.height) || 0;
   });
   const hasInitialRender = computed(() => {

package/dist/src/composables/CssSupport/cssSupport.composable.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports._resetCssSupportCache = _resetCssSupportCache;
 exports.useCssSupport = useCssSupport;
+exports.useCssSupportClient = useCssSupportClient;
 var _vue = require("vue");
 const _cache = /* @__PURE__ */new Map();
 let _initialized = false;
@@ -97,4 +98,15 @@ function _resetCssSupportCache() {
   _cache.clear();
   _initialized = false;
   _flags.value = emptyMap();
+}
+function useCssSupportClient(feature, options = {}) {
+  const {
+    defaultValue = false
+  } = options;
+  const flag = (0, _vue.ref)(defaultValue);
+  (0, _vue.onMounted)(() => {
+    const query = FEATURE_QUERIES[feature] ?? feature;
+    flag.value = rawSupports(query);
+  });
+  return flag;
 }

package/dist/src/composables/CssSupport/cssSupport.composable.d.ts

@@ -67,4 +67,29 @@ export declare function useCssSupport(): IUseCssSupport;
  * _resetCssSupportCache
  ********************************************************/
 export declare function _resetCssSupportCache(): void;
+export interface IUseCssSupportClientOptions {
+    /**
+     * Value returned during SSR and on the first client render (before
+     * `onMounted` fires). Pick the side of the branch that produces the
+     * smaller / safer markup — typically `false` (= JS fallback) so the
+     * server output stays universally compatible.
+     */
+    defaultValue?: boolean;
+}
+/*********************************************************
+ * useCssSupportClient
+ *
+ * @description
+ * Hydration-safe single-feature gate. Returns a `Ref<boolean>` that
+ * starts at `defaultValue` and flips to the real support result on
+ * `onMounted`. Use to gate **markup**, not styles — for style-only
+ * branches prefer `useCssSupport().css.value.X` directly.
+ *
+ * @example
+ *   const supportsContainer = useCssSupportClient('containerQueries')
+ *   // template:
+ *   //   <div v-if="supportsContainer">…CSS path…</div>
+ *   //   <div v-else>…JS fallback path…</div>
+ ********************************************************/
+export declare function useCssSupportClient(feature: TCssFeatureName | string, options?: IUseCssSupportClientOptions): Ref<boolean>;
 export {};

package/dist/src/composables/CssSupport/cssSupport.composable.js

@@ -1,4 +1,4 @@
-import { computed, readonly, ref } from "vue";
+import { computed, onMounted, readonly, ref } from "vue";
 const _cache = /* @__PURE__ */ new Map();
 let _initialized = false;
 const FEATURE_QUERIES = {
@@ -91,3 +91,12 @@ export function _resetCssSupportCache() {
   _initialized = false;
   _flags.value = emptyMap();
 }
+export function useCssSupportClient(feature, options = {}) {
+  const { defaultValue = false } = options;
+  const flag = ref(defaultValue);
+  onMounted(() => {
+    const query = FEATURE_QUERIES[feature] ?? feature;
+    flag.value = rawSupports(query);
+  });
+  return flag;
+}