origam 2.21.0 → 2.23.0

package/dist/src/assets/css/tokens/dark.css

@@ -182,6 +182,11 @@
   --origam-color__surface---inverse: var(--origam-color__neutral---0);
   --origam-color__text---primary: var(--origam-color__neutral---50);
   --origam-color__text---secondary: var(--origam-color__neutral---400);
+  /* #1044 — `neutral---500` échoue AA ici (4.18:1 sur #0a0a0a, sous 4.5:1) ;
+     aucun rung n'existe entre 400 et 500 (300/400/500 = d4d4d4/a3a3a3/737373).
+     `tertiary` s'aplatit donc sur la même valeur que `secondary` en sombre —
+     assumé, pas un oubli : préféré à une violation AA. */
+  --origam-color__text---tertiary: var(--origam-color__neutral---400);
   --origam-color__text---disabled: var(--origam-color__neutral---600);
   --origam-color__text---inverse: var(--origam-color__neutral---950); /* #615 — voir light.css : le bloc runtime de `origamDarkTheme` pose #0a0a0a */
   --origam-color__text---onColor: var(--origam-color__neutral---0);
@@ -3192,6 +3197,9 @@
     --origam-color__surface---inverse: var(--origam-color__neutral---0);
     --origam-color__text---primary: var(--origam-color__neutral---50);
     --origam-color__text---secondary: var(--origam-color__neutral---400);
+    /* #1044 — meme aplatissement que le bloc explicite ci-dessus : voir sa
+       note, cette feuille doit rester le miroir exact de ce bloc. */
+    --origam-color__text---tertiary: var(--origam-color__neutral---400);
     --origam-color__text---disabled: var(--origam-color__neutral---600);
     --origam-color__text---inverse: var(--origam-color__neutral---950); /* #615 — voir light.css : le bloc runtime de `origamDarkTheme` pose #0a0a0a */
     --origam-color__text---onColor: var(--origam-color__neutral---0);

package/dist/src/assets/css/tokens/light.css

@@ -84,6 +84,9 @@
      `origam.theme.ts` qu'il faut changer AVEC, sinon la divergence revient. */
   --origam-color__text---primary: var(--origam-color__neutral---950);
   --origam-color__text---secondary: var(--origam-color__neutral---600);
+  /* #1044 — un niveau sous `secondary`, mesuré 4.74:1 sur `surface---default`
+     (#ffffff), AA. Voir dark.css pour la contrainte qui a fixé ce rung. */
+  --origam-color__text---tertiary: var(--origam-color__neutral---500);
   --origam-color__text---disabled: var(--origam-color__neutral---400);
   --origam-color__text---inverse: var(--origam-color__neutral---0);
   --origam-color__text---onColor: var(--origam-color__neutral---0);

package/dist/src/assets/scss/tokens/_dark.scss

@@ -182,6 +182,11 @@
   --origam-color__surface---inverse: var(--origam-color__neutral---0);
   --origam-color__text---primary: var(--origam-color__neutral---50);
   --origam-color__text---secondary: var(--origam-color__neutral---400);
+  /* #1044 — `neutral---500` échoue AA ici (4.18:1 sur #0a0a0a, sous 4.5:1) ;
+     aucun rung n'existe entre 400 et 500 (300/400/500 = d4d4d4/a3a3a3/737373).
+     `tertiary` s'aplatit donc sur la même valeur que `secondary` en sombre —
+     assumé, pas un oubli : préféré à une violation AA. */
+  --origam-color__text---tertiary: var(--origam-color__neutral---400);
   --origam-color__text---disabled: var(--origam-color__neutral---600);
   --origam-color__text---inverse: var(--origam-color__neutral---950); /* #615 — voir light.css : le bloc runtime de `origamDarkTheme` pose #0a0a0a */
   --origam-color__text---onColor: var(--origam-color__neutral---0);
@@ -3192,6 +3197,9 @@
     --origam-color__surface---inverse: var(--origam-color__neutral---0);
     --origam-color__text---primary: var(--origam-color__neutral---50);
     --origam-color__text---secondary: var(--origam-color__neutral---400);
+    /* #1044 — meme aplatissement que le bloc explicite ci-dessus : voir sa
+       note, cette feuille doit rester le miroir exact de ce bloc. */
+    --origam-color__text---tertiary: var(--origam-color__neutral---400);
     --origam-color__text---disabled: var(--origam-color__neutral---600);
     --origam-color__text---inverse: var(--origam-color__neutral---950); /* #615 — voir light.css : le bloc runtime de `origamDarkTheme` pose #0a0a0a */
     --origam-color__text---onColor: var(--origam-color__neutral---0);

package/dist/src/assets/scss/tokens/_light.scss

@@ -84,6 +84,9 @@
      `origam.theme.ts` qu'il faut changer AVEC, sinon la divergence revient. */
   --origam-color__text---primary: var(--origam-color__neutral---950);
   --origam-color__text---secondary: var(--origam-color__neutral---600);
+  /* #1044 — un niveau sous `secondary`, mesuré 4.74:1 sur `surface---default`
+     (#ffffff), AA. Voir dark.css pour la contrainte qui a fixé ce rung. */
+  --origam-color__text---tertiary: var(--origam-color__neutral---500);
   --origam-color__text---disabled: var(--origam-color__neutral---400);
   --origam-color__text---inverse: var(--origam-color__neutral---0);
   --origam-color__text---onColor: var(--origam-color__neutral---0);

package/dist/src/components/CommandPalette/OrigamCommandPalette.vue

@@ -1,5 +1,8 @@
 <template>
-	<teleport to="body">
+	<teleport
+			:disabled="!teleportTarget"
+			:to="teleportTarget"
+	>
 		<transition name="origam-command-palette--fade">
 			<div
 					v-if="isActive"
@@ -172,6 +175,7 @@ import OrigamKbd from "../Kbd/OrigamKbd.vue";
 import { useCommand } from "../../composables/CommandPalette/command.composable";
 import { useHotkey } from "../../composables/Commons/hotkey.composable";
 import { useLocale } from "../../composables/Commons/locale.composable";
+import { useTeleport } from "../../composables/Commons/teleport.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import { useVModel } from "../../composables/Commons/vModel.composable";
 import { COMMAND_PALETTE_DEFAULT_HOTKEY, COMMAND_PALETTE_DEFAULT_MAX_HEIGHT, COMMAND_PALETTE_DEFAULT_WIDTH } from "../../consts/CommandPalette/command-palette.const";
@@ -195,7 +199,8 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: null, required: false }
+  fontSize: { type: null, required: false },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true }
 });
 const emit = defineEmits(["update:modelValue", "select", "query"]);
 defineSlots();
@@ -208,6 +213,7 @@ watch(registryOpen, (next) => {
 watch(isActive, (next) => {
   if (next !== registryOpen.value) registryOpen.value = next;
 });
+const { teleportTarget } = useTeleport(computed(() => props.attach || false));
 const uid = getUid();
 const inputId = computed(() => `origam-command-palette-input-${uid}`);
 const listboxId = computed(() => `origam-command-palette-listbox-${uid}`);

package/dist/src/components/ContextualMenu/OrigamContextualMenu.vue

@@ -39,7 +39,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -75,6 +74,7 @@ const props = defineProps({
   eager: { type: Boolean, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) },
   scrim: { type: [Boolean, String], required: false, default: false },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true },
   activeClass: { type: String, required: false },
   expandIcon: { type: String, required: false },
   collapseIcon: { type: String, required: false },

package/dist/src/components/Dialog/OrigamDialog.vue

@@ -168,7 +168,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -204,6 +203,7 @@ const props = defineProps({
   eager: { type: Boolean, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) },
   scrim: { type: [Boolean, String], required: false, default: true },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true },
   flat: { type: Boolean, required: false },
   hover: { type: Boolean, required: false },
   image: { type: String, required: false },

package/dist/src/components/Dialog/OrigamDialogConfirmation.vue

@@ -144,7 +144,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -180,6 +179,7 @@ const props = defineProps({
   eager: { type: Boolean, required: false },
   transition: { type: [Boolean, String, Object], required: false },
   scrim: { type: [Boolean, String], required: false },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true },
   flat: { type: Boolean, required: false },
   hover: { type: Boolean, required: false },
   image: { type: String, required: false },

package/dist/src/components/Drawer/OrigamDrawer.vue

@@ -1,7 +1,7 @@
 <template>
 	<teleport
-			:disabled="isLayoutOrphan"
-			:to="teleportDrawer"
+			:disabled="teleportDisabled"
+			:to="teleportTo"
 			defer
 	>
 		<origam-transition :transition="transition">
@@ -83,6 +83,7 @@ import { useStateEffect } from "../../composables/Commons/stateEffect.composable
 import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
 import { useSticky } from "../../composables/Commons/sticky.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
+import { useTeleport } from "../../composables/Commons/teleport.composable";
 import { useToggleScope } from "../../composables/Commons/toggleScope.composable";
 import { useTouch } from "../../composables/Commons/touch.composable";
 import { useVModel } from "../../composables/Commons/vModel.composable";
@@ -104,6 +105,7 @@ const props = defineProps({
   sticky: { type: Boolean, required: false },
   push: { type: [Boolean, null], required: false, default: null },
   clipped: { type: [Boolean, null], required: false, default: null },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true, default: null },
   tag: { type: String, required: false, default: "nav" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -276,6 +278,14 @@ const teleportDrawer = computed(() => {
   if (isLayoutOrphan.value) return void 0;
   return `#${resolvedLayoutId.value} .origam-layout__wrapper`;
 });
+const hasExplicitAttach = computed(() => props.attach !== null);
+const { teleportTarget: attachTarget } = useTeleport(computed(() => props.attach || false));
+const teleportDisabled = computed(() => {
+  return hasExplicitAttach.value ? !attachTarget.value : isLayoutOrphan.value;
+});
+const teleportTo = computed(() => {
+  return hasExplicitAttach.value ? attachTarget.value : teleportDrawer.value;
+});
 const { isStuck, stickyStyles } = useSticky({ rootEl, isSticky, layoutItemStyles });
 const scrimStyles = computed(() => ({
   ...isDragging.value ? {

package/dist/src/components/Menu/OrigamMenu.vue

@@ -101,7 +101,6 @@ import { getUid } from "../../utils/Commons/getCurrentInstance.util";
 const props = defineProps({
   id: { type: String, required: false },
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -139,6 +138,7 @@ const props = defineProps({
   eager: { type: Boolean, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) },
   scrim: { type: [Boolean, String], required: false, default: false },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true },
   activeClass: { type: String, required: false },
   expandIcon: { type: String, required: false },
   collapseIcon: { type: String, required: false },

package/dist/src/components/Overlay/OrigamOverlay.vue

@@ -83,7 +83,6 @@ import { getScrollParent } from "../../utils/Commons/scroll.util";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false, default: true },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -121,7 +120,8 @@ const props = defineProps({
   contained: { type: Boolean, required: false },
   eager: { type: Boolean, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamFade }) },
-  scrim: { type: [Boolean, String], required: false, default: true }
+  scrim: { type: [Boolean, String], required: false, default: true },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true }
 });
 const emits = defineEmits(["afterEnter", "afterLeave", "keydown", "update:modelValue", "click:outside"]);
 defineSlots();

package/dist/src/components/Snackbar/OrigamSnackbar.vue

@@ -120,7 +120,6 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -158,6 +157,7 @@ const props = defineProps({
     component: OrigamSnack
   }) },
   scrim: { type: [Boolean, String], required: false },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true },
   position: { type: null, required: false },
   top: { type: [Number, String], required: false },
   bottom: { type: [Number, String], required: false },

package/dist/src/components/Snackbar/OrigamSnackbarGroup.vue

@@ -1,5 +1,8 @@
 <template>
-  <teleport to="body">
+  <teleport
+    :disabled="!teleportTarget"
+    :to="teleportTarget"
+  >
     <component
       :is="tag"
       :id="resolvedDomId"
@@ -41,6 +44,7 @@ import OrigamSnackbarItem from "./OrigamSnackbarItem.vue";
 import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
+import { useTeleport } from "../../composables/Commons/teleport.composable";
 import { useSnackbarGroupInternal } from "../../composables/Snackbar/snackbarGroupInternal.composable";
 import { INTENT } from "../../enums/Commons/intent.enum";
 import { SNACKBAR_GROUP_DIRECTION } from "../../enums/Snackbar/snackbar-group.enum";
@@ -55,13 +59,15 @@ const props = defineProps({
   direction: { type: null, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  tag: { type: String, required: false, default: "div" }
+  tag: { type: String, required: false, default: "div" },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true }
 });
 defineEmits([]);
 defineSlots();
 const { t } = useLocale();
 const { filterProps } = useProps(props);
 const rootRef = ref();
+const { teleportTarget } = useTeleport(computed(() => props.attach || false));
 const { rawItems, registerDefaultDuration } = useSnackbarGroupInternal(() => props.id);
 watch(() => props.defaultDuration, (duration) => {
   registerDefaultDuration(duration);

package/dist/src/components/Tooltip/OrigamTooltip.vue

@@ -59,7 +59,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   absolute: { type: Boolean, required: false },
-  attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false, default: false },
   contentClass: { type: [String, Array], required: false },
   contentProps: { type: null, required: false },
@@ -95,6 +94,7 @@ const props = defineProps({
   eager: { type: Boolean, required: false, default: true },
   transition: { type: [Boolean, String, Object], required: false, default: false },
   scrim: { type: [Boolean, String], required: false, default: false },
+  attach: { type: [Boolean, String, null], required: false, skipCheck: true },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   fontSize: { type: null, required: false },

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.resetCodeHighlighterForTesting = resetCodeHighlighterForTesting;
 exports.useCode = useCode;
+var _vue = require("vue");
 var _code = require("../../consts/Code/code.const.cjs");
 var _enums = require("../../enums/index.cjs");
 let _highlighterPromise = null;
@@ -33,11 +34,11 @@ function lruSet(key, value) {
   }
   _cache.set(key, value);
 }
-async function loadHighlighter() {
+async function loadHighlighter(loader) {
   if (_highlighterUnavailable) return null;
   if (_highlighterPromise) return _highlighterPromise;
   _highlighterPromise = (async () => {
-    const shiki = await Promise.resolve().then(() => require("shiki"));
+    const shiki = loader ? await loader() : await Promise.resolve().then(() => require("shiki"));
     const highlighter = await shiki.createHighlighter({
       themes: [_code.CODE_LIGHT_THEME, _code.CODE_DARK_THEME],
       langs: [..._code.SUPPORTED_LANGS]
@@ -50,7 +51,7 @@ async function loadHighlighter() {
     _highlighterPromise = null;
     if (!_unavailableWarned) {
       _unavailableWarned = true;
-      console.warn("[origam] OrigamCode: `shiki` is not installed \u2014 rendering plain, unhighlighted code. Add `shiki` to your dependencies to enable syntax highlighting.", err);
+      console.warn(loader ? "[origam] OrigamCode: the `highlighter` supplied to `createOrigam({ code })` failed to load \u2014 rendering plain, unhighlighted code." : "[origam] OrigamCode: `shiki` is not installed \u2014 rendering plain, unhighlighted code. Add `shiki` to your dependencies to enable syntax highlighting.", err);
     }
     return null;
   });
@@ -64,12 +65,13 @@ function resolveLang(lang) {
   return _enums.CODE_LANG.PLAINTEXT;
 }
 function useCode() {
+  const highlighterLoader = (0, _vue.inject)(_code.ORIGAM_CODE_KEY)?.highlighter;
   async function highlight(code, lang) {
     const resolvedLang = resolveLang(lang);
     const key = makeCacheKey(code, resolvedLang);
     const cached = lruGet(key);
     if (cached !== void 0) return cached;
-    const highlighter = await loadHighlighter();
+    const highlighter = await loadHighlighter(highlighterLoader);
     if (!highlighter) {
       const plain = escapeHtml(code);
       lruSet(key, plain);
@@ -97,7 +99,7 @@ function useCode() {
     return html;
   }
   async function prime() {
-    await loadHighlighter();
+    await loadHighlighter(highlighterLoader);
   }
   function isReady() {
     return _highlighterReady;

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

@@ -1,6 +1,13 @@
 import type { IUseCodeReturn } from '../../interfaces/Code/code.interface';
 /**
  * Public hook — see `IUseCodeReturn` for the surface contract.
+ *
+ * `inject(ORIGAM_CODE_KEY)` below is called synchronously here, which is
+ * only valid while THIS function runs during a component's `setup()`
+ * (exactly how `OrigamCode.vue` calls it). `undefined` when no
+ * `createOrigam({ code })` ancestor provided one (or none was installed at
+ * all): `loadHighlighter()` then keeps its original `import('shiki')`
+ * behaviour, unchanged.
  */
 export declare function useCode(): IUseCodeReturn;
 /**

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

@@ -1,4 +1,5 @@
-import { CODE_CACHE_MAX_ENTRIES, CODE_DARK_THEME as DARK_THEME, CODE_LIGHT_THEME as LIGHT_THEME, SUPPORTED_LANGS } from "../../consts/Code/code.const.js";
+import { inject } from "vue";
+import { CODE_CACHE_MAX_ENTRIES, CODE_DARK_THEME as DARK_THEME, CODE_LIGHT_THEME as LIGHT_THEME, ORIGAM_CODE_KEY, SUPPORTED_LANGS } from "../../consts/Code/code.const.js";
 import { CODE_LANG } from "../../enums/index.js";
 let _highlighterPromise = null;
 let _highlighterReady = false;
@@ -26,11 +27,11 @@ function lruSet(key, value) {
   }
   _cache.set(key, value);
 }
-async function loadHighlighter() {
+async function loadHighlighter(loader) {
   if (_highlighterUnavailable) return null;
   if (_highlighterPromise) return _highlighterPromise;
   _highlighterPromise = (async () => {
-    const shiki = await import(
+    const shiki = loader ? await loader() : await import(
       /* @vite-ignore */
       "shiki"
     );
@@ -47,7 +48,7 @@ async function loadHighlighter() {
     if (!_unavailableWarned) {
       _unavailableWarned = true;
       console.warn(
-        "[origam] OrigamCode: `shiki` is not installed \u2014 rendering plain, unhighlighted code. Add `shiki` to your dependencies to enable syntax highlighting.",
+        loader ? "[origam] OrigamCode: the `highlighter` supplied to `createOrigam({ code })` failed to load \u2014 rendering plain, unhighlighted code." : "[origam] OrigamCode: `shiki` is not installed \u2014 rendering plain, unhighlighted code. Add `shiki` to your dependencies to enable syntax highlighting.",
         err
       );
     }
@@ -65,12 +66,13 @@ function resolveLang(lang) {
   return CODE_LANG.PLAINTEXT;
 }
 export function useCode() {
+  const highlighterLoader = inject(ORIGAM_CODE_KEY)?.highlighter;
   async function highlight(code, lang) {
     const resolvedLang = resolveLang(lang);
     const key = makeCacheKey(code, resolvedLang);
     const cached = lruGet(key);
     if (cached !== void 0) return cached;
-    const highlighter = await loadHighlighter();
+    const highlighter = await loadHighlighter(highlighterLoader);
     if (!highlighter) {
       const plain = escapeHtml(code);
       lruSet(key, plain);
@@ -92,7 +94,7 @@ export function useCode() {
     return html;
   }
   async function prime() {
-    await loadHighlighter();
+    await loadHighlighter(highlighterLoader);
   }
   function isReady() {
     return _highlighterReady;

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

@@ -9,9 +9,14 @@ var _display = require("./display.composable.cjs");
 var _commons = require("../../consts/Commons/commons.const.cjs");
 function useHydration() {
   if (!_commons.IN_BROWSER) return (0, _vue.shallowRef)(false);
-  const {
-    ssr
-  } = (0, _display.useDisplay)();
+  let ssr;
+  try {
+    ({
+      ssr
+    } = (0, _display.useDisplay)());
+  } catch {
+    return (0, _vue.shallowRef)(true);
+  }
   if (ssr) {
     const isMounted = (0, _vue.shallowRef)(false);
     (0, _vue.onMounted)(() => {

package/dist/src/composables/Commons/hydration.composable.d.ts

@@ -13,11 +13,19 @@
  * navigateur (`!IN_BROWSER`), retourne un Ref fige a `false`.
  *
  * @description
- * ⛔ Dans un navigateur, ce composable DEPEND de `createOrigam()` : il
+ * ⚠️ Dans un navigateur, ce composable PREFERE `createOrigam()` : il
  * appelle `useDisplay()`, dont l'injection n'existe que si le plugin est
- * installe. Mesure, montage d'un composant sans `createOrigam()` :
- * `useHydration()` LEVE `Could not find Origam display injection`. Ce
- * n'est donc pas un utilitaire autonome, contrairement a `useSsrBoot` qui
- * n'injecte rien.
+ * installe, pour savoir si l'app tourne en SSR. **#attach-harmonisation** —
+ * jusque-la, l'absence du plugin faisait LEVER `useDisplay()` (« Could not
+ * find Origam display injection »), ce qui a casse 4 e2e marketing (SSR
+ * Nuxt) : `useTeleport()`, qui appelle desormais ce composable pour eviter
+ * une course de montage (voir teleport.composable.ts), doit rester
+ * utilisable comme primitive BRUTE — sans `createOrigam()` — exactement
+ * comme il l'etait avant. Le `try/catch` ci-dessous rattrape UNIQUEMENT ce
+ * cas (plugin absent) et retombe sur le chemin non-SSR (`shallowRef(true)`,
+ * aucun delai) : un consommateur qui a reellement besoin du signal SSR et
+ * installe le plugin obtient exactement le comportement documente plus
+ * haut, inchange. Aucun test n'epinglait le lever — `grep -rn "Could not
+ * find Origam display injection" packages/tests` ne retourne rien.
  ********************************************************/
 export declare function useHydration(): import("vue").ShallowRef<boolean, boolean>;

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

@@ -3,7 +3,12 @@ import { useDisplay } from "./display.composable.js";
 import { IN_BROWSER } from "../../consts/Commons/commons.const.js";
 export function useHydration() {
   if (!IN_BROWSER) return shallowRef(false);
-  const { ssr } = useDisplay();
+  let ssr;
+  try {
+    ({ ssr } = useDisplay());
+  } catch {
+    return shallowRef(true);
+  }
   if (ssr) {
     const isMounted = shallowRef(false);
     onMounted(() => {

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

@@ -7,10 +7,13 @@ exports.useTeleport = useTeleport;
 var _commons = require("../../consts/Commons/commons.const.cjs");
 var _console = require("../../utils/Commons/console.util.cjs");
 var _vue = require("vue");
+var _hydration = require("./hydration.composable.cjs");
 function useTeleport(target) {
+  const isHydrated = (0, _hydration.useHydration)();
   const teleportTarget = (0, _vue.computed)(() => {
     const _target = target.value;
     if (_target === true || !_commons.IN_BROWSER) return void 0;
+    if (!isHydrated.value) return void 0;
     const targetElement = _target === false ? document.body : typeof _target === "string" ? document.querySelector(_target) : _target;
     if (targetElement == null) {
       (0, _console.consoleWarn)(`Unable to locate target ${_target}`);

package/dist/src/composables/Commons/teleport.composable.d.ts

@@ -15,6 +15,62 @@ import { Ref } from 'vue';
  * `teleportTarget` reste `undefined` — le composant appelant retombe
  * alors sur son rendu non-teleporte plutot que de crasher. En SSR
  * (`!IN_BROWSER`), toujours `undefined`, sans avertissement.
+ *
+ * @description
+ * ⛔ `useHydration()` — #attach-harmonisation. Un selecteur `string` ciblant
+ * un NOEUD FRERE cree dans la MEME passe de rendu (ex: un conteneur local
+ * que le consommateur monte lui-meme juste avant le composant qui teleporte)
+ * peut ne pas encore etre connecte a `document` au moment ou ce `computed`
+ * s'evalue pour la PREMIERE fois — mesure concrete sous Histoire (dont
+ * `OrigamApp`/`OrigamLayout` englobent chaque story dans un `<Suspense>` :
+ * l'arbre entier, y compris les freres, n'est commit dans le vrai DOM
+ * qu'une fois la resolution async terminee). `document.querySelector` n'est
+ * PAS une dependance reactive : si le premier appel echoue, le `computed`
+ * reste bloque sur `undefined` pour toujours, meme apres que la cible soit
+ * reellement montee — rien ne le marque sale.
+ *
+ * @description
+ * ⛔ UN COMPTEUR LOCAL (`mountTick`, essaye d'abord) CASSE LE SSR MARKETING.
+ * Mesure, CI (#1043) : 4 e2e marketing (Nuxt, SSR) en echec sur « sans
+ * erreur JS console » / « pas d'erreur d'hydratation ». Cause reelle,
+ * independante de `mountTick` : la toute PREMIERE evaluation du computed
+ * divergeait DEJA entre serveur et client. Cote serveur, `!IN_BROWSER` est
+ * toujours vrai (pas de `window` en SSR) -> `undefined` (teleport
+ * desactive, rendu en place). Cote client, `IN_BROWSER` est vrai DES LE
+ * DEPART, y compris pendant la passe d'HYDRATATION (avant tout
+ * `onMounted`) -> la cible (souvent `document.body`, qui existe toujours)
+ * se resout avec SUCCES sur ce tout premier rendu -> teleport deja ACTIF.
+ * Vue compare les deux rendus pendant l'hydratation : desactive vs actif,
+ * d'ou le decalage. `mountTick` n'ajoutait qu'une DEUXIEME evaluation
+ * post-montage — elle n'a jamais ete la cause du decalage, qui existait
+ * deja sur la premiere.
+ *
+ * @description
+ * Le fix : `isHydrated.value` (vrai gate, pas une simple lecture de
+ * dependance) force EXACTEMENT le meme `undefined` cote client QUE cote
+ * serveur tant que l'hydratation n'est pas terminee — `useHydration()`
+ * (deja utilise par `OrigamOverlay.vue`) seede `isHydrated` a `false` sur
+ * les DEUX rendus compares (serveur ET premiere passe client) quand l'app
+ * est reellement en SSR (`ssr` vrai), et ne bascule a `true` que dans un
+ * `onMounted` — donc APRES que l'hydratation ait deja conclu. Reutilise,
+ * ne redeclare pas.
+ *
+ * @description
+ * ⚠️ Dans une app 100% client (pas de SSR — Histoire, Tauri…),
+ * `useHydration()` renvoie `isHydrated=true` DES LE DEPART (son
+ * optimisation deliberee : « pas de delai artificiel » — voir son propre
+ * commentaire de tete) : le gate ci-dessous ne retarde donc RIEN la ou il
+ * n'y a aucune hydratation a proteger. Consequence mesuree : une cible
+ * FRERE montee dans la MEME passe de rendu que le consommateur (ex: un
+ * conteneur local qu'une story Histoire monte juste avant le composant
+ * teleportant, sous un `<Suspense>` qui ne commit l'arbre qu'une fois
+ * resolu) peut encore echouer sur cette toute premiere resolution, pour la
+ * meme raison qu'avant : `document.querySelector` n'est pas reactif. Ce
+ * n'est PAS le defaut que ce correctif vise — c'est un defaut DIFFERENT,
+ * propre a la construction du test (une cible fraiche ne preexiste jamais
+ * en usage reel), traite cote story plutot qu'en reintroduisant un
+ * compteur local ici (voir les stories CommandPalette / SnackbarGroup /
+ * Drawer, variante « Prop - attach »).
  ********************************************************/
 export declare function useTeleport(target: Ref<boolean | string | Element>): {
     teleportTarget: import("vue").ComputedRef<Element | undefined>;

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

@@ -1,10 +1,13 @@
 import { IN_BROWSER } from "../../consts/Commons/commons.const.js";
 import { consoleWarn } from "../../utils/Commons/console.util.js";
 import { computed } from "vue";
+import { useHydration } from "./hydration.composable.js";
 export function useTeleport(target) {
+  const isHydrated = useHydration();
   const teleportTarget = computed(() => {
     const _target = target.value;
     if (_target === true || !IN_BROWSER) return void 0;
+    if (!isHydrated.value) return void 0;
     const targetElement = _target === false ? document.body : typeof _target === "string" ? document.querySelector(_target) : _target;
     if (targetElement == null) {
       consoleWarn(`Unable to locate target ${_target}`);

package/dist/src/composables/Commons/variant.composable.d.ts

@@ -1,5 +1,3 @@
-import type { IVariantProps } from '../../interfaces/Commons/variant.interface';
-import type { TVariant, TVariantInput } from '../../types/Commons/variant.type';
 import { Ref } from 'vue';
 /*********************************************************
  * useVariant
@@ -10,7 +8,17 @@ import { Ref } from 'vue';
  * contrairement a `useDensity`/`useSize`, il n'y a pas de liste blanche
  * (`*_ARRAY`) a matcher : toute valeur non-nulle produit une classe, y
  * compris une variante que le composant ne connait pas.
+ *
+ * Le parametre props n'est plus type via l'ancien `IVariantProps` (mixin
+ * unique acceptant a tort `TVariant | TVariantInput` partout — scinde en
+ * `IActionVariantProps` / `IInputVariantProps`, cf. #1050). Un type
+ * structurel `{ variant?: string }` suffit ici : la fonction ne fait que
+ * lire `props.variant` et le stringifier, elle n'a jamais eu besoin de
+ * connaitre la liste de valeurs d'une famille precise — et les deux
+ * interfaces scindees (comme toute autre) lui restent assignables.
  ********************************************************/
-export declare function useVariant(props: IVariantProps | Ref<TVariant | TVariantInput | string | undefined>, name?: string): {
+export declare function useVariant(props: {
+    variant?: string;
+} | Ref<string | undefined>, name?: string): {
     variantClasses: import("vue").ComputedRef<string[]>;
 };

package/dist/src/consts/Code/code.const.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SUPPORTED_LANGS = exports.CODE_LIGHT_THEME = exports.CODE_DEFAULTS = exports.CODE_DARK_THEME = exports.CODE_CACHE_MAX_ENTRIES = void 0;
+exports.SUPPORTED_LANGS = exports.ORIGAM_CODE_KEY = exports.CODE_LIGHT_THEME = exports.CODE_DEFAULTS = exports.CODE_DARK_THEME = exports.CODE_CACHE_MAX_ENTRIES = void 0;
 var _enums = require("../../enums/index.cjs");
 const SUPPORTED_LANGS = exports.SUPPORTED_LANGS = Object.freeze([_enums.CODE_LANG.PLAINTEXT, _enums.CODE_LANG.VUE, _enums.CODE_LANG.TS, _enums.CODE_LANG.JS, _enums.CODE_LANG.TSX, _enums.CODE_LANG.JSX, _enums.CODE_LANG.SCSS, _enums.CODE_LANG.CSS, _enums.CODE_LANG.JSON, _enums.CODE_LANG.BASH, _enums.CODE_LANG.HTML, _enums.CODE_LANG.XML, _enums.CODE_LANG.YAML, _enums.CODE_LANG.MD]);
 const CODE_CACHE_MAX_ENTRIES = exports.CODE_CACHE_MAX_ENTRIES = 64;
@@ -20,4 +20,5 @@ const CODE_DEFAULTS = exports.CODE_DEFAULTS = Object.freeze({
    * snackbar default so the visual rhythm stays consistent.
    */
   copyFeedbackDurationMs: 2e3
-});
+});
+const ORIGAM_CODE_KEY = exports.ORIGAM_CODE_KEY = /* @__PURE__ */Symbol.for("origam:code");