@revenexx/studio-shared 0.1.2 → 0.3.0

package/dist/runtime/lib/i18nBridge.d.ts

@@ -0,0 +1,31 @@
+import type { Ref } from 'vue';
+/** Interpolation values for a message with `{placeholders}`. */
+export type TranslateNamed = Record<string, unknown>;
+/**
+ * The subset of vue-i18n's `t` the packages are allowed to rely on:
+ * `t(key)`, `t(key, named)`, `t(key, plural)`, `t(key, plural, named)`.
+ */
+export interface Translate {
+    (key: string): string;
+    (key: string, named: TranslateNamed): string;
+    (key: string, plural: number): string;
+    (key: string, plural: number, named: TranslateNamed): string;
+}
+export interface Translator {
+    t: Translate;
+    /** The host's current UI locale. Reactive, so computeds re-run on a switch. */
+    locale: Ref<string>;
+}
+/** Called once by the host. Pass `null` to detach (tests). */
+export declare function setTranslator(translator: Translator | null): void;
+/** Whether a host translator is installed. Rarely needed — prefer `translate`. */
+export declare function hasTranslator(): boolean;
+/** The host's current UI locale, or `'en'` when the host has no i18n. */
+export declare function currentLocale(): string;
+/**
+ * Translate through the host, or return the key unchanged.
+ *
+ * Reads `locale.value` before delegating so the caller picks up a reactive
+ * dependency on the locale even if the host's `t` were to memoize.
+ */
+export declare const translate: Translate;

package/dist/runtime/lib/i18nBridge.js

@@ -0,0 +1,17 @@
+import { shallowRef } from "vue";
+const registered = shallowRef(null);
+export function setTranslator(translator) {
+  registered.value = translator;
+}
+export function hasTranslator() {
+  return registered.value !== null;
+}
+export function currentLocale() {
+  return registered.value?.locale.value ?? "en";
+}
+export const translate = ((key, ...args) => {
+  const translator = registered.value;
+  if (!translator) return key;
+  void translator.locale.value;
+  return translator.t(key, ...args);
+});

package/dist/runtime/lib/isoLists.d.ts

@@ -0,0 +1,61 @@
+/**
+ * The two international lists every studio ends up needing: countries
+ * (ISO 3166-1 alpha-2) and currencies (ISO 4217).
+ *
+ * They live in `studio-shared` rather than in a studio because a country is
+ * not a Commerce concern — Mail wants a sender country, Analytics wants a
+ * region breakdown, and whichever surface asked second would otherwise make
+ * the second copy. This module is that first copy, and the only one.
+ *
+ * ## Codes are data, names are derived
+ *
+ * The country CODES are written out here, because that literally is the
+ * standard: 249 two-letter identifiers, stable, and not enumerable from any
+ * runtime API. The NAMES are not written out — `Intl.DisplayNames` has them
+ * for every locale the browser ships, so a German cockpit reads
+ * "Vereinigtes Königreich" without anyone translating a hardcoded English
+ * list. Currencies need neither: `Intl.supportedValuesOf('currency')` is the
+ * code list, and `Intl.DisplayNames` is the names.
+ *
+ * The practical consequence is that adding a language costs nothing here.
+ *
+ * ## Sorted by the label, never by the code
+ *
+ * An operator scans a country list alphabetically by what they read.
+ * "Ägypten" belongs at the top of a German list and "Egypt" belongs under E;
+ * sorting by `EG` would put it in neither place. So every list is collated in
+ * the locale it is being displayed in, and the sort is redone per locale.
+ * The result is cached per locale — the collation is the expensive part and
+ * the answer never changes within a session.
+ */
+/**
+ * The locale the lists are labelled in when a caller does not say. The cockpit
+ * is German-facing; when a real `useLocale()` lands, pass it through and this
+ * default stops being used.
+ */
+export declare const DEFAULT_ISO_LOCALE = "de";
+/** One choice: the stored code plus what a human reads in their language. */
+export interface IsoOption {
+    /** The value written to the column — `'DE'`, `'EUR'`. */
+    code: string;
+    /** Localized name — `'Deutschland'`, `'Euro'`. Falls back to the code. */
+    label: string;
+}
+/** ISO 3166-1 alpha-2, unsorted. Use `countryOptions()` to display them. */
+export declare function countryCodes(): readonly string[];
+/**
+ * ISO 4217, as the runtime knows it. Empty on an engine without
+ * `Intl.supportedValuesOf` — callers treat that like any other unresolvable
+ * list and fall back to whatever literal options they were given.
+ */
+export declare function currencyCodes(): readonly string[];
+/** Drop the memoised lists — for tests, and after a language switch. */
+export declare function clearIsoListCache(): void;
+/** Every country, sorted by its name in `locale`. */
+export declare function countryOptions(locale?: string): IsoOption[];
+/** Every currency the runtime knows, sorted by its name in `locale`. */
+export declare function currencyOptions(locale?: string): IsoOption[];
+/** `'DE'` → `'Deutschland'`. Unknown codes come back unchanged. */
+export declare function countryLabel(code: unknown, locale?: string): string;
+/** `'EUR'` → `'Euro'`. Unknown codes come back unchanged. */
+export declare function currencyLabel(code: unknown, locale?: string): string;

package/dist/runtime/lib/isoLists.js

@@ -0,0 +1,62 @@
+const COUNTRY_CODES = Object.freeze(
+  "AD AE AF AG AI AL AM AO AQ AR AS AT AU AW AX AZ BA BB BD BE BF BG BH BI BJ BL BM BN BO BQ BR BS BT BV BW BY BZ CA CC CD CF CG CH CI CK CL CM CN CO CR CU CV CW CX CY CZ DE DJ DK DM DO DZ EC EE EG EH ER ES ET FI FJ FK FM FO FR GA GB GD GE GF GG GH GI GL GM GN GP GQ GR GS GT GU GW GY HK HM HN HR HT HU ID IE IL IM IN IO IQ IR IS IT JE JM JO JP KE KG KH KI KM KN KP KR KW KY KZ LA LB LC LI LK LR LS LT LU LV LY MA MC MD ME MF MG MH MK ML MM MN MO MP MQ MR MS MT MU MV MW MX MY MZ NA NC NE NF NG NI NL NO NP NR NU NZ OM PA PE PF PG PH PK PL PM PN PR PS PT PW PY QA RE RO RS RU RW SA SB SC SD SE SG SH SI SJ SK SL SM SN SO SR SS ST SV SX SY SZ TC TD TF TG TH TJ TK TL TM TN TO TR TT TV TW TZ UA UG UM US UY UZ VA VC VE VG VI VN VU WF WS YE YT ZA ZM ZW".split(" ")
+);
+export const DEFAULT_ISO_LOCALE = "de";
+export function countryCodes() {
+  return COUNTRY_CODES;
+}
+export function currencyCodes() {
+  const supported = Intl.supportedValuesOf;
+  if (typeof supported !== "function") return [];
+  try {
+    return Object.freeze(supported.call(Intl, "currency"));
+  } catch {
+    return [];
+  }
+}
+function displayNames(type, locale) {
+  try {
+    return new Intl.DisplayNames([locale], { type, fallback: "code" });
+  } catch {
+    return null;
+  }
+}
+function collator(locale) {
+  try {
+    return new Intl.Collator(locale);
+  } catch {
+    return { compare: (a, b) => a < b ? -1 : a > b ? 1 : 0 };
+  }
+}
+function build(codes, type, locale) {
+  const names = displayNames(type, locale);
+  const compare = collator(locale).compare;
+  return codes.map((code) => ({ code, label: names?.of(code) || code })).sort((a, b) => compare(a.label, b.label));
+}
+const cache = /* @__PURE__ */ new Map();
+function cached(key, make) {
+  const hit = cache.get(key);
+  if (hit) return hit;
+  const built = make();
+  cache.set(key, built);
+  return built;
+}
+export function clearIsoListCache() {
+  cache.clear();
+}
+export function countryOptions(locale = DEFAULT_ISO_LOCALE) {
+  return cached(`region:${locale}`, () => build(COUNTRY_CODES, "region", locale));
+}
+export function currencyOptions(locale = DEFAULT_ISO_LOCALE) {
+  return cached(`currency:${locale}`, () => build(currencyCodes(), "currency", locale));
+}
+export function countryLabel(code, locale = DEFAULT_ISO_LOCALE) {
+  const key = typeof code === "string" ? code.trim().toUpperCase() : "";
+  if (!key) return "";
+  return displayNames("region", locale)?.of(key) || key;
+}
+export function currencyLabel(code, locale = DEFAULT_ISO_LOCALE) {
+  const key = typeof code === "string" ? code.trim().toUpperCase() : "";
+  if (!key) return "";
+  return displayNames("currency", locale)?.of(key) || key;
+}

package/dist/runtime/lib/sidebarNav.d.ts

@@ -0,0 +1,34 @@
+import type { SidebarNavItem } from '../types/nav.js';
+/**
+ * Pure helpers behind `SidebarNav` / `SidebarNavLink`. They live outside the
+ * SFCs so the active-route and link-target rules can be tested without
+ * mounting a component (and so both SFCs share exactly one implementation).
+ *
+ * **`children` means tabs, not sub-navigation.** An item with children is one
+ * sidebar row; its children are the tabs of the page that row opens. Nothing
+ * here expands, so there is no collapse state to keep — the row is a link like
+ * any other, it just knows about the routes its tabs carry. Anything that
+ * should stand on its own in the sidebar is declared as its own item.
+ */
+/** Stable identity for `v-for` keys — `to` is unique where it exists. */
+export declare function sidebarItemKey(item: SidebarNavItem): string;
+/** True when `path` is the item's own route, or sits below it. */
+export declare function sidebarItemIsActive(item: SidebarNavItem, path: string): boolean;
+/** True when the item, or any of its tabs, matches `path`. */
+export declare function sidebarItemHoldsActive(item: SidebarNavItem, path: string): boolean;
+/**
+ * Which row gets the highlight. The tabs of a group are not rows of their own,
+ * so the group stays lit for every one of them — an operator on *Carriers*
+ * still sees where they are, which is **Shipping**.
+ */
+export declare function sidebarItemIsCurrent(item: SidebarNavItem, path: string): boolean;
+/**
+ * Where the row links. A group with a route of its own opens that (it is the
+ * default tab); a pure container — a heading several apps contribute to, where
+ * no single app's view is the right landing page — opens its first tab.
+ *
+ * `undefined` means the row has nothing to open at all. `navCompose` prunes
+ * those before they reach a sidebar, but the guard keeps a hand-written
+ * section (Settings, Apps, …) from rendering a dead row.
+ */
+export declare function sidebarItemTarget(item: SidebarNavItem): string | undefined;

package/dist/runtime/lib/sidebarNav.js

@@ -0,0 +1,22 @@
+export function sidebarItemKey(item) {
+  return item.key ?? item.to ?? item.label;
+}
+export function sidebarItemIsActive(item, path) {
+  if (!item.to) return false;
+  if (item.exact) return path === item.to;
+  return path === item.to || path.startsWith(`${item.to}/`);
+}
+export function sidebarItemHoldsActive(item, path) {
+  return sidebarItemIsActive(item, path) || (item.children ?? []).some((child) => sidebarItemHoldsActive(child, path));
+}
+export function sidebarItemIsCurrent(item, path) {
+  return sidebarItemHoldsActive(item, path);
+}
+export function sidebarItemTarget(item) {
+  if (item.to) return item.to;
+  for (const child of item.children ?? []) {
+    const target = sidebarItemTarget(child);
+    if (target) return target;
+  }
+  return void 0;
+}

package/dist/runtime/lib/talkback.d.ts

@@ -0,0 +1,59 @@
+import type { ShallowRef } from 'vue';
+import type { Talkback, TalkbackOptions } from '@revenexx/talkback-js';
+export interface PlatformTalkbackConfig {
+    /** Centrifugo's client transport, e.g. `https://talkback.revenexx.com`. */
+    host: string;
+    /**
+     * Where a connection token is minted. The facade's own `${host}/v1/tokens` by
+     * default — the browser's Zitadel token authorises it directly, so no BFF route
+     * stands in between.
+     */
+    tokenEndpoint: string;
+    /** Likewise, `${host}/v1/subscription-tokens`. */
+    subscriptionTokenEndpoint: string;
+    /**
+     * The active tenant slug. A GETTER, not a value: operator impersonation
+     * changes it at run time, and it is positionally first in every channel name.
+     */
+    tenant: () => string;
+    /**
+     * The caller's Zitadel access token, passed to the facade as the bearer.
+     *
+     * The facade admits it because an end user holds `user` or `admin` in the
+     * Zitadel USER project, and such a caller may mint only for itself: the request
+     * carries no `user_id` and the facade fills it from this token's own `sub`.
+     */
+    getToken: () => Promise<string | null>;
+    /**
+     * Replaces the Centrifuge client. Left unset outside tests — the fake in
+     * `@revenexx/talkback-js/testing` satisfies it.
+     */
+    client?: TalkbackOptions['client'];
+    debug?: boolean;
+}
+/**
+ * The `sub` claim of a JWT, or null when it isn't one.
+ *
+ * This is where the client's `userId` comes from, and the choice is
+ * load-bearing rather than convenient. The BFF derives the token's subject from
+ * the same claim of the same token, so client and server cannot disagree about
+ * the name of the `user:` channel — a mismatch would mint a grant for one name
+ * and subscribe to another, which fails as a silent 403 on a channel nobody
+ * publishes to. Deliberately NOT verified: nothing is authorised here, and the
+ * BFF verifies the signature before it grants anything.
+ *
+ * Mirrors the base64url handling in the cockpit's `useConsoleAuth`.
+ */
+export declare function decodeJwtSub(jwt: string | null | undefined): string | null;
+/**
+ * Builds the client for a host.
+ *
+ * `tenant` and `userId` are providers because talkback-js reads them on every
+ * channel build; passing values would pin the first tenant the page saw.
+ */
+export declare function createPlatformTalkback(config: PlatformTalkbackConfig): Promise<Talkback>;
+/** Registered once by the host's provider. Pass `null` to detach (tests). */
+export declare function setTalkback(tb: Talkback | null): void;
+export declare function getTalkback(): Talkback | null;
+/** The registry itself, for composables that must react to it appearing. */
+export declare function talkbackRef(): ShallowRef<Talkback | null>;

package/dist/runtime/lib/talkback.js

@@ -0,0 +1,49 @@
+import { shallowRef } from "vue";
+export function decodeJwtSub(jwt) {
+  if (!jwt) return null;
+  try {
+    const parts = jwt.split(".");
+    if (parts.length !== 3) return null;
+    const p = parts[1].replace(/-/g, "+").replace(/_/g, "/");
+    const b64 = p.padEnd(p.length + (4 - p.length % 4) % 4, "=");
+    const claims = JSON.parse(atob(b64));
+    return typeof claims.sub === "string" && claims.sub ? claims.sub : null;
+  } catch {
+    return null;
+  }
+}
+export async function createPlatformTalkback(config) {
+  const { createTalkback } = await import("@revenexx/talkback-js");
+  let userId = "";
+  const accessToken = async () => {
+    const token = await config.getToken();
+    if (token) {
+      userId = decodeJwtSub(token) ?? userId;
+    }
+    return token;
+  };
+  try {
+    userId = decodeJwtSub(await config.getToken()) ?? "";
+  } catch {
+  }
+  return createTalkback({
+    host: config.host,
+    tenant: () => config.tenant(),
+    userId: () => userId,
+    tokenEndpoint: config.tokenEndpoint,
+    subscriptionTokenEndpoint: config.subscriptionTokenEndpoint,
+    accessToken,
+    ...config.client ? { client: config.client } : {},
+    ...config.debug === void 0 ? {} : { debug: config.debug }
+  });
+}
+const current = shallowRef(null);
+export function setTalkback(tb) {
+  current.value = tb;
+}
+export function getTalkback() {
+  return current.value;
+}
+export function talkbackRef() {
+  return current;
+}

package/dist/runtime/types/nav.d.ts

@@ -0,0 +1,37 @@
+import type { Component } from 'vue';
+/**
+ * SidebarNav data shapes. They live in a plain .ts file (not the SFC) so the
+ * package barrel can re-export them without dragging a `.vue` import into
+ * node-side type resolution (the module dts build / plain tsc can't follow
+ * type re-exports through an SFC).
+ */
+export type SidebarNavItem = {
+    label: string;
+    /**
+     * Target route. Omit it for a pure container — a heading several apps
+     * contribute pages to, where no single view is the right landing page. The
+     * row then links to the first of its `children` instead.
+     */
+    to?: string;
+    icon?: Component;
+    badge?: number | string | null;
+    /** Dim + show a "soon" tag (not-yet-shipped surfaces). */
+    preview?: boolean;
+    /** Match the route exactly (for studio roots like `/settings`). */
+    exact?: boolean;
+    /**
+     * The item's **tabs**, not sub-navigation. The sidebar shows one row; the
+     * page it opens shows these across the top, each addressed by its own route
+     * (see `studio-commerce/lib/navGroups.ts`). The row stays highlighted on all
+     * of them.
+     */
+    children?: SidebarNavItem[];
+    /** Stable `v-for` key. Defaults to `to ?? label`. */
+    key?: string;
+};
+export type SidebarNavSection = {
+    key: string;
+    /** Empty/omitted → no group label (pinned items at the top). */
+    label?: string;
+    items: SidebarNavItem[];
+};

package/dist/runtime/types/storage.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Media storage service (revenexx/storage) `/v1` API shapes — the subset the
+ * shared media components (uploader, folder tree, picker dialog) render.
+ *
+ * Mirrors the cockpit's `app/types/storage.ts` field-for-field so the two are
+ * structurally identical: the cockpit passes its own `StorageAsset` straight
+ * into these components and back out of their emits. The module can't import
+ * the cockpit's copy (host-only path), so the contract lives here.
+ */
+export type AssetKind = 'image' | 'video' | 'audio' | 'pdf' | 'document' | 'archive' | 'model3d' | 'other';
+export type AssetStatus = 'uploading' | 'pending_scan' | 'pending_processing' | 'available' | 'quarantined' | 'processing_failed' | 'soft_deleted';
+export type AssetVisibility = 'public' | 'private';
+export interface StorageAsset {
+    id: string;
+    tenant_id: string;
+    folder_id: string | null;
+    kind: AssetKind;
+    status: AssetStatus;
+    visibility: AssetVisibility;
+    mime_type: string;
+    original_name: string;
+    path_name: string;
+    display_name: string | null;
+    alt_text: string | null;
+    description: string | null;
+    tags: string[];
+    size_bytes: number;
+    content_hash: string | null;
+    width: number | null;
+    height: number | null;
+    duration_ms: number | null;
+    page_count: number | null;
+    dominant_color: string | null;
+    metadata: Record<string, unknown>;
+    /** Delivery URL for public assets; null for private (use a signed URL). */
+    url: string | null;
+    /** 3D assets only: imgproxy-resizable preview image (rendered from the model). */
+    preview_url?: string | null;
+    /** 3D assets only: the web-renderable mesh (.glb) for <rx-model-viewer>. */
+    model_url?: string | null;
+    created_at: string | null;
+    updated_at: string | null;
+    processed_at: string | null;
+    deleted_at: string | null;
+}
+export interface StorageFolder {
+    id: string;
+    tenant_id: string;
+    parent_id: string | null;
+    name: string;
+    /** Full hierarchy path, e.g. `/marketing/q1-campaign`. */
+    path: string;
+    is_system: boolean;
+    created_at: string | null;
+    updated_at: string | null;
+}
+/** A folder augmented with its children, for rendering the tree. */
+export interface StorageFolderNode extends StorageFolder {
+    children: StorageFolderNode[];
+}
+/** Per-file state while a batch uploads. */
+export interface UploadProgress {
+    name: string;
+    pct: number;
+    status: 'pending' | 'uploading' | 'done' | 'failed';
+    error?: string;
+}

package/dist/types.d.mts

@@ -0,0 +1,27 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { type SidebarNavItem, type SidebarNavSection } from '../dist/runtime/types/nav.js'
+
+export { type PlatformAuth } from '../dist/runtime/composables/usePlatformAuth.js'
+
+export { type PlatformTenant } from '../dist/runtime/composables/usePlatformTenant.js'
+
+export { type PlatformTalkback } from '../dist/runtime/composables/usePlatformTalkback.js'
+
+export { type TalkbackChannel, type TalkbackChannelOptions, type TalkbackMaybeRef } from '../dist/runtime/composables/useTalkbackChannels.js'
+
+export { type MediaLibraryClient } from '../dist/runtime/composables/useMediaLibrary.js'
+
+export { type IsoOption } from '../dist/runtime/lib/isoLists.js'
+
+export { type Translate, type TranslateNamed, type Translator } from '../dist/runtime/lib/i18nBridge.js'
+
+export { default } from './module.mjs'
+
+export * from '../dist/runtime/components/DataTable/types.js'
+
+export * from '../dist/runtime/types/storage.js'

package/package.json

@@ -1,32 +1,60 @@
 {
   "name": "@revenexx/studio-shared",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "type": "module",
-  "description": "Shared revenexx Studio shell primitives (PageHeader, SidebarNav, StateCard, DataTable, …) + the platform provider contract (usePlatformAuth/usePlatformTenant). A Nuxt layer — extend it, then add a studio module.",
-  "main": "./nuxt.config.ts",
+  "description": "Shared revenexx Studio shell primitives (PageHeader, SidebarNav, StateCard, DataTable, …) + the platform provider contract (usePlatformAuth/usePlatformTenant). A Nuxt module — add it to `modules`.",
+  "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
   "exports": {
     ".": {
-      "types": "./index.ts",
-      "import": "./index.ts"
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
     },
-    "./nuxt.config": "./nuxt.config.ts",
-    "./components/*": "./components/*"
+    "./components/*": "./dist/runtime/components/*",
+    "./lib/*": {
+      "types": "./dist/runtime/lib/*.d.ts",
+      "import": "./dist/runtime/lib/*.js"
+    }
   },
   "files": [
-    "nuxt.config.ts",
-    "index.ts",
-    "components",
-    "composables",
+    "dist",
     "LICENSE"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
+  "dependencies": {
+    "@nuxt/kit": "^4.0.0"
+  },
   "peerDependencies": {
     "@revenexx/studio": "*",
+    "@revenexx/talkback-js": "^0.3.0",
+    "@solar-icons/nuxt": "^1.2.0",
+    "centrifuge": ">=5.2.0",
     "nuxt": "^4.0.0",
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "vue-sonner": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@revenexx/talkback-js": {
+      "optional": true
+    },
+    "centrifuge": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/kit": "^4.0.0",
+    "@revenexx/talkback-js": "^0.3.0",
+    "centrifuge": "^5.4.0",
+    "nuxt": "^4.2.2",
+    "vue": "^3.5.26",
+    "vue-tsc": "^2.2.0"
   },
-  "license": "SEE LICENSE IN LICENSE"
+  "license": "SEE LICENSE IN LICENSE",
+  "scripts": {
+    "build": "nuxt-module-build build"
+  }
 }