@bridge-ds/toolbar 0.0.0-stage → 0.1.0

package/dist/session.d.ts

@@ -0,0 +1,226 @@
+export interface StorageLike {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+    removeItem(key: string): void;
+}
+/**
+ * What the toolbar knows about the product and its design system: from bridge.config.json (the product's entry in
+ * products[] and previews), read at build time (the Admin demo) or from the design system repository at run time.
+ */
+export interface BridgeBuild {
+    /** The repository whose pull requests `?bridge=<n>` names: the product's own repository, else the design system's. */
+    owner: string;
+    repo: string;
+    /** Production Studio (previews.production.docs): the link back and the shipped tokens.css. */
+    studio: string | null;
+    /** The product in production (products[].production, else previews.production.<key>): Before of a code change. */
+    production: string | null;
+    /** The product's preview template (products[].preview): only these hosts may hand a code change over to production. */
+    preview: string | null;
+    /** VERCEL_ENV of the build ('production', 'preview', 'development'), null when unknown. */
+    deployEnv: string | null;
+    /** The library branch (repo.defaultBranch) and the token files' root (tokens.root): changes tried together. */
+    defaultBranch?: string;
+    tokensRoot?: string;
+    /** The product's key (products[].key) and the design system repository ("owner/name"), for the way back to Studio. */
+    product?: string;
+    ds?: string;
+}
+export declare const PARAM = "bridge";
+/** Where After lives for a code change, carried to production on Before. */
+export declare const RETURN_PARAM = "bridge-return";
+/** Scroll position carried across a Before/After navigation. */
+export declare const SCROLL_PARAM = "bridge-scroll";
+export declare const SESSION_KEY = "bridge-admin:change";
+export declare const RETURN_KEY = "bridge-admin:return";
+export declare const DOCK_KEY = "bridge-admin:toolbar-dock";
+export declare const OPEN_KEY = "bridge-admin:toolbar-open";
+/** Changes tried together: the picks of the tokens they set differently (core encodePicks), from Studio. */
+export declare const USE_PARAM = "bridge-use";
+export declare const USE_KEY = "bridge-admin:use";
+/** At most this many changes are tried together. */
+export declare const MAX_TOGETHER = 4;
+/**
+ * The change the toolbar follows: `?bridge=<n>` wins and is kept for the session (the admin's hash router keeps the
+ * query, a reload or a new path does not need it again); `?bridge=off` forgets it. Blocked storage only loses the
+ * memory, never the toolbar of the current page.
+ */
+export declare function readChange(search: string, storage: StorageLike | null): number | null;
+/**
+ * The change numbers in "101" or "101,118,120" (an encoded comma too): positive, at most 7 digits, no repeats, at
+ * most MAX_TOGETHER. Anything else in the list makes it unreadable (empty), never a guess.
+ */
+export declare function parseChanges(raw: string | null | undefined): number[];
+/**
+ * The changes the toolbar follows: one from "Try it in the product", 2 to 4 from "Try them together". Same memory as
+ * one change: `?bridge=` wins and is kept for the session, `?bridge=off` forgets it, blocked storage only loses the
+ * memory. The picks (`bridge-use`) travel with the list and are kept, or forgotten, with it.
+ */
+export declare function readChanges(search: string, storage: StorageLike | null): number[];
+/** The picks that came with the list: from the address, else the session. */
+export declare function readUse(search: string, storage: StorageLike | null): string | null;
+/** A host that matches the product's preview template (`bridge-admin-git-{branch}-team.vercel.app`), https only. */
+export declare function isPreviewUrl(raw: string | null | undefined, template: string | null): boolean;
+/** The preview to return to from production, from `?bridge-return=` or the session. Only a preview host counts. */
+export declare function readReturn(search: string, storage: StorageLike | null, template: string | null): string | null;
+export type Where = 'production' | 'preview' | 'local';
+/** Which deployment this page is: the product in production by host or by build, a preview, or a local build. */
+export declare function whereAmI(host: string, build: Pick<BridgeBuild, 'production' | 'deployEnv'>): Where;
+/**
+ * Whether the toolbar renders. Never without a change from Studio. In production only for the Before side of a code
+ * change, that is with a preview to return to: production on its own renders nothing.
+ */
+export declare function shouldRender(input: {
+    change: number | null;
+    where: Where;
+    returnTo: string | null;
+    together?: boolean;
+}): boolean;
+/** "These 3 changes": the After side of changes tried together, counting the ones switched on. */
+export declare const togetherLabel: (n: number) => string;
+/** The one hint line of changes tried together: where they run and why. */
+export declare const TOGETHER_HINT = "The live product, with these changes' tokens applied in your browser only. No preview has all of them together.";
+/** Show what changed found nothing on this screen for changes tried together. */
+export declare const TOGETHER_EMPTY_LINE = "These changes don't touch this screen. Try another screen.";
+/** Switches one change on or off, keeping the order Studio listed them in. */
+export declare function toggleIncluded(all: number[], included: number[], n: number, on: boolean): number[];
+/** Studio's Changes list, where changes are tried together (and the way back). */
+export declare function studioChangesUrl(build: Pick<BridgeBuild, 'studio' | 'owner' | 'repo'>): string;
+export type ChangeMode = 'tokens' | 'code';
+/** Token files (DTCG and the contrast gate) and changesets only: Before swaps tokens live. Anything else is code. */
+export declare function changeMode(files: string[]): ChangeMode;
+/** The live tokens (main's build, served by production Studio at `/tokens.css`), or null when not configured. */
+export declare function liveTokensUrl(build: Pick<BridgeBuild, 'studio'>): string | null;
+/**
+ * Studio's page for the change. A change in a product's own repository (an exploration there) opens as
+ * `?exploration=<n>&product=<key>`; a change of the design system repository as `?pr=<n>`.
+ */
+export declare function studioChangeUrl(build: Pick<BridgeBuild, 'studio' | 'owner' | 'repo' | 'product' | 'ds'>, change: number): string;
+/** Shape of a visual impact manifest that the toolbar reads (written by @bridge-ds/visual). */
+export interface ManifestShot {
+    kind: 'story' | 'route';
+    label: string;
+    route?: string;
+    tenant?: string;
+    theme: string;
+    status: string;
+    percent: number;
+}
+export interface Screen {
+    label: string;
+    route: string;
+    tenant: string;
+    theme: string;
+    percent: number;
+}
+/** The product screens the change alters, most changed first, one entry per screen, shop and theme. */
+export declare function changedScreens(shots: ManifestShot[] | null | undefined): Screen[];
+/**
+ * The same page on another deployment (code changes: production for Before, the preview for After), with the
+ * change, the way back and the scroll position in the query. The hash route (ra-core) is kept.
+ */
+export declare function sameScreenOn(target: string, here: {
+    search: string;
+    hash: string;
+}, extra: {
+    change: number;
+    returnTo?: string | null;
+    scroll?: number;
+}): string;
+/** The scroll position a Before/After navigation carried, once: the caller removes it from the address. */
+export declare function readScroll(search: string): number | null;
+export type Dock = 'start' | 'center' | 'end';
+/** Bottom right by default: the corner a back office leaves free most often. */
+export declare function readDock(storage: StorageLike | null): Dock;
+/** One step left (-1) or right (+1), stopping at the edges. */
+export declare function stepDock(dock: Dock, step: -1 | 1): Dock;
+/** The dock nearest to where a drag ended: thirds of the viewport width. */
+export declare function dockAt(x: number, width: number): Dock;
+/** Title of a change as people read it: conventional prefixes ("tokens: ") dropped, first letter up. */
+export declare function readableTitle(title: string): string;
+/** The B shortcut flips Before and After, unless the person is typing or holds a modifier. */
+export declare function isFlipKey(e: {
+    key: string;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    target: unknown;
+}): boolean;
+export interface Rect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/**
+ * Where the toolbar goes so it never covers a primary or submit button of the page: the chosen dock if it is free,
+ * else the opposite corner, else the centre, else the chosen dock lifted just above the buttons it would cover. The
+ * docks sit inside the area [left, right] (the content column, so it never sits over the sidebar).
+ */
+export declare function placeToolbar(input: {
+    left: number;
+    right: number;
+    vh: number;
+    w: number;
+    h: number;
+    gutter: number;
+    preferred: Dock;
+    obstacles: Rect[];
+    margin?: number;
+}): {
+    dock: Dock;
+    lift: number;
+};
+export type NoDifference = {
+    kind: 'theme';
+    here: string;
+    touched: string;
+} | {
+    kind: 'brand';
+    here: string;
+    touched: string;
+};
+/**
+ * Whether a token change shows nothing in this theme and brand, from the token files it edits (DTCG layers named
+ * semantic/<theme>, brands/<brand>.<theme>, brands/<brand>). Null when it may show, or when that cannot be told:
+ * never claims "no difference" on a guess.
+ */
+export declare function noVisibleDifference(files: string[], here: {
+    theme: string;
+    brand: string;
+}): NoDifference | null;
+/** "darker default background." The change title as a short phrase after "This change:". */
+export declare function changeSummary(title: string): string;
+export interface TokenChange {
+    /** Token path, "color.bg.default". */
+    path: string;
+    /** CSS variable the token builds to, "--color-bg-default". */
+    cssVar: string;
+    /** The role it plays, what designers call it: "Page canvas" (its description), "Brand primary" (a palette role). */
+    name: string;
+    /** The exact step, second: "Primary 700" for a palette step, null for a semantic token. */
+    step: string | null;
+    type: string | null;
+    /** The theme and brand its file applies to (null: every one). */
+    theme: string | null;
+    brand: string | null;
+}
+/** The role a token plays: its description's first phrase, a palette role ("Brand primary"), else its path in words. */
+export declare function roleOfToken(path: string, description: string | null): string;
+/** The palette step, shown second: "palette.primary.700" -> "Primary 700"; null for other tokens. */
+export declare function stepOfToken(path: string): string | null;
+/** Designer name of a token: the first phrase of its description, else its path in words ("Bg default"). */
+export declare function designerName(path: string, description: string | null): string;
+/**
+ * The tokens one file changes between two versions of it (parsed DTCG JSON, null when the file is added or removed):
+ * every leaf whose $value differs, with the theme and brand its layer applies to.
+ */
+export declare function tokenChanges(file: string, before: unknown, after: unknown): TokenChange[];
+/** WCAG contrast ratio between two rgb() colours, or null when either is not rgb (a non-colour value). */
+export declare function contrastRatio(a: string, b: string): number | null;
+/** Two colours under 1.1:1 read as the same at a glance: the swatch says "Subtle change" so it does not look broken. */
+export declare const isSubtle: (a: string, b: string) => boolean;
+/** rgb(245, 247, 249) -> #f5f7f9; anything else as is. */
+export declare function toHex(color: string): string;
+/** "from Darker default background", "from #101 and #118": which change a token's value comes from (changes tried together). */
+export declare function fromText(from: number[], titleOf: (n: number) => string | null): string;

package/dist/together.d.ts

@@ -0,0 +1,45 @@
+import { type ChangeEdits, type CombinePicks, type LayoutOptions, type ModeConfig, type TokenSet } from '@bridge-ds/core';
+import { type TokenChange } from './session';
+export { changeEdits, decodePicks } from '@bridge-ds/core';
+export interface TogetherBase {
+    /** Token files of the latest library, relative to the tokens root. */
+    latest: Record<string, string>;
+    options: LayoutOptions;
+    modes: Pick<ModeConfig, 'brands' | 'themes' | 'densities'>;
+    /** The latest library as a token set, built once. */
+    main: TokenSet;
+}
+export declare function togetherBase(latest: Record<string, string>, options: LayoutOptions, modes: TogetherBase['modes']): TogetherBase;
+/** A token the combination edits, as the toolbar names it, with the changes whose value it takes. */
+export interface TogetherToken extends TokenChange {
+    from: number[];
+}
+export interface TogetherResult {
+    included: number[];
+    /** The stylesheet that paints the combination over the latest library (empty when nothing differs). */
+    css: string;
+    tokens: TogetherToken[];
+    /** Tokens two switched-on changes set differently with no pick that counts: the first change's value is used. */
+    unpicked: string[];
+    problems: string[];
+    next: TokenSet;
+}
+/** The scope attributes ThemeProvider sets together on the root and on every popup. */
+export declare const scopeSelector: (theme: string, brand: string, density: string) => string;
+/**
+ * The combination of the switched-on changes. A token two of them set differently takes the pick from Studio; when
+ * the picked change is switched off and two others still disagree, the first one listed is used (and said).
+ */
+export declare function together(base: TogetherBase, changes: ChangeEdits[], picks: CombinePicks, include: number[]): TogetherResult;
+export interface TogetherPair {
+    token: TogetherToken;
+    before: string;
+    after: string;
+    color: boolean;
+}
+/** Before (latest library) and after (the combination) of each edited token where the page is: theme, brand, density. */
+export declare function togetherPairs(base: TogetherBase, result: TogetherResult, here: {
+    theme: string;
+    brand: string;
+    density: string;
+}): TogetherPair[];

package/dist/together.js

@@ -0,0 +1,57 @@
+import { combineChanges, buildTokenSet, previewOverrides, cssVarOf, resolve, parseColor, cssOf } from "@bridge-ds/core";
+import { changeEdits, decodePicks } from "@bridge-ds/core";
+import { s as stepOfToken, a as roleOfToken } from "./session-CzlIsFDY.js";
+function togetherBase(latest, options, modes) {
+  return { latest, options, modes, main: buildTokenSet(latest, options) };
+}
+const scopeSelector = (theme, brand, density) => `[data-theme="${theme}"][data-brand="${brand}"][data-density="${density}"]`;
+function together(base, changes, picks, include) {
+  const combo = combineChanges(base.latest, changes, picks, { include, unpicked: "first" });
+  const next = buildTokenSet(combo.files, base.options);
+  const rules = [];
+  for (const theme of base.modes.themes) {
+    for (const brand of base.modes.brands) {
+      for (const density of base.modes.densities.length ? base.modes.densities : ["comfortable"]) {
+        const vars = previewOverrides(base.main, next, { theme, brand, density });
+        const body = Object.entries(vars).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => `  ${k}: ${v.replace(/[;{}<]/g, "")};`).join("\n");
+        if (body) rules.push(`${scopeSelector(theme, brand, density)} {
+${body}
+}`);
+      }
+    }
+  }
+  const tokens = Object.entries(combo.from).sort(([a], [b]) => a.localeCompare(b)).map(([path, from]) => {
+    const t = next.byPath.get(path) ?? base.main.byPath.get(path);
+    return { path, cssVar: cssVarOf(path), name: roleOfToken(path, t?.description ?? null), step: stepOfToken(path), type: t?.type ?? null, theme: null, brand: null, from };
+  });
+  return { included: combo.included, css: rules.join("\n"), tokens, unpicked: combo.missing.map((m) => m.path), problems: combo.problems, next };
+}
+function shownValue(type, value) {
+  if (value === void 0) return null;
+  if (type === "color") {
+    const c = parseColor(value);
+    if (!c) return null;
+    const [r, g, b] = [c.r, c.g, c.b].map((x) => Math.round(x * 255));
+    return c.a < 1 ? `rgba(${r}, ${g}, ${b}, ${c.a})` : `rgb(${r}, ${g}, ${b})`;
+  }
+  return cssOf(type ?? "unknown", value) ?? null;
+}
+function togetherPairs(base, result, here) {
+  const out = [];
+  for (const token of result.tokens) {
+    const a = shownValue(token.type, resolve(base.main.byPath, token.path, { ...here, overrides: base.main.overrideIndex }).value);
+    const b = shownValue(token.type, resolve(result.next.byPath, token.path, { ...here, overrides: result.next.overrideIndex }).value);
+    if (a === null || b === null || a === b) continue;
+    out.push({ token, before: a, after: b, color: token.type === "color" });
+  }
+  return out;
+}
+export {
+  changeEdits,
+  decodePicks,
+  scopeSelector,
+  together,
+  togetherBase,
+  togetherPairs
+};
+//# sourceMappingURL=together.js.map

package/dist/together.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"together.js","sources":["../src/together.ts"],"sourcesContent":["// Changes tried together, the toolbar's combination: the latest library (this build's own token files, what the page\n// already wears) plus the token edits of the changes switched on, through @bridge-ds/core token-combine. It becomes\n// one stylesheet that paints every theme, brand and density, and the before and after of each token it edits, with\n// the changes it comes from. Pure (no DOM): loaded only when changes are tried together, tested in together.test.ts.\nimport {\n  buildTokenSet,\n  combineChanges,\n  cssOf,\n  cssVarOf,\n  parseColor,\n  previewOverrides,\n  resolve,\n  type ChangeEdits,\n  type CombinePicks,\n  type LayoutOptions,\n  type ModeConfig,\n  type TokenSet,\n} from '@bridge-ds/core';\nimport { roleOfToken, stepOfToken, type TokenChange } from './session';\n\n// The toolbar reaches the combination through this one lazy module, so a product's main bundle never carries\n// @bridge-ds/core: the edits of a change and the picks from Studio come from here too.\nexport { changeEdits, decodePicks } from '@bridge-ds/core';\n\nexport interface TogetherBase {\n  /** Token files of the latest library, relative to the tokens root. */\n  latest: Record<string, string>;\n  options: LayoutOptions;\n  modes: Pick<ModeConfig, 'brands' | 'themes' | 'densities'>;\n  /** The latest library as a token set, built once. */\n  main: TokenSet;\n}\n\nexport function togetherBase(latest: Record<string, string>, options: LayoutOptions, modes: TogetherBase['modes']): TogetherBase {\n  return { latest, options, modes, main: buildTokenSet(latest, options) };\n}\n\n/** A token the combination edits, as the toolbar names it, with the changes whose value it takes. */\nexport interface TogetherToken extends TokenChange {\n  from: number[];\n}\n\nexport interface TogetherResult {\n  included: number[];\n  /** The stylesheet that paints the combination over the latest library (empty when nothing differs). */\n  css: string;\n  tokens: TogetherToken[];\n  /** Tokens two switched-on changes set differently with no pick that counts: the first change's value is used. */\n  unpicked: string[];\n  problems: string[];\n  next: TokenSet;\n}\n\n/** The scope attributes ThemeProvider sets together on the root and on every popup. */\nexport const scopeSelector = (theme: string, brand: string, density: string) => `[data-theme=\"${theme}\"][data-brand=\"${brand}\"][data-density=\"${density}\"]`;\n\n/**\n * The combination of the switched-on changes. A token two of them set differently takes the pick from Studio; when\n * the picked change is switched off and two others still disagree, the first one listed is used (and said).\n */\nexport function together(base: TogetherBase, changes: ChangeEdits[], picks: CombinePicks, include: number[]): TogetherResult {\n  const combo = combineChanges(base.latest, changes, picks, { include, unpicked: 'first' });\n  const next = buildTokenSet(combo.files, base.options);\n  const rules: string[] = [];\n  for (const theme of base.modes.themes) {\n    for (const brand of base.modes.brands) {\n      for (const density of base.modes.densities.length ? base.modes.densities : ['comfortable']) {\n        const vars = previewOverrides(base.main, next, { theme, brand, density });\n        const body = Object.entries(vars)\n          .sort(([a], [b]) => a.localeCompare(b))\n          .map(([k, v]) => `  ${k}: ${v.replace(/[;{}<]/g, '')};`)\n          .join('\\n');\n        if (body) rules.push(`${scopeSelector(theme, brand, density)} {\\n${body}\\n}`);\n      }\n    }\n  }\n  const tokens: TogetherToken[] = Object.entries(combo.from)\n    .sort(([a], [b]) => a.localeCompare(b))\n    .map(([path, from]) => {\n      const t = next.byPath.get(path) ?? base.main.byPath.get(path);\n      return { path, cssVar: cssVarOf(path), name: roleOfToken(path, t?.description ?? null), step: stepOfToken(path), type: t?.type ?? null, theme: null, brand: null, from };\n    });\n  return { included: combo.included, css: rules.join('\\n'), tokens, unpicked: combo.missing.map((m) => m.path), problems: combo.problems, next };\n}\n\n/** A resolved value as the toolbar compares it: a colour as rgb()/rgba() (what computed styles read), else its CSS. */\nfunction shownValue(type: string | null, value: unknown): string | null {\n  if (value === undefined) return null;\n  if (type === 'color') {\n    const c = parseColor(value);\n    if (!c) return null;\n    const [r, g, b] = [c.r, c.g, c.b].map((x) => Math.round(x * 255));\n    return c.a < 1 ? `rgba(${r}, ${g}, ${b}, ${c.a})` : `rgb(${r}, ${g}, ${b})`;\n  }\n  return cssOf(type ?? 'unknown', value) ?? null;\n}\n\nexport interface TogetherPair {\n  token: TogetherToken;\n  before: string;\n  after: string;\n  color: boolean;\n}\n\n/** Before (latest library) and after (the combination) of each edited token where the page is: theme, brand, density. */\nexport function togetherPairs(base: TogetherBase, result: TogetherResult, here: { theme: string; brand: string; density: string }): TogetherPair[] {\n  const out: TogetherPair[] = [];\n  for (const token of result.tokens) {\n    const a = shownValue(token.type, resolve(base.main.byPath, token.path, { ...here, overrides: base.main.overrideIndex }).value);\n    const b = shownValue(token.type, resolve(result.next.byPath, token.path, { ...here, overrides: result.next.overrideIndex }).value);\n    if (a === null || b === null || a === b) continue;\n    out.push({ token, before: a, after: b, color: token.type === 'color' });\n  }\n  return out;\n}\n"],"names":[],"mappings":";;;AAiCO,SAAS,aAAa,QAAgC,SAAwB,OAA4C;AAC/H,SAAO,EAAE,QAAQ,SAAS,OAAO,MAAM,cAAc,QAAQ,OAAO,EAAA;AACtE;AAmBO,MAAM,gBAAgB,CAAC,OAAe,OAAe,YAAoB,gBAAgB,KAAK,kBAAkB,KAAK,oBAAoB,OAAO;AAMhJ,SAAS,SAAS,MAAoB,SAAwB,OAAqB,SAAmC;AAC3H,QAAM,QAAQ,eAAe,KAAK,QAAQ,SAAS,OAAO,EAAE,SAAS,UAAU,SAAS;AACxF,QAAM,OAAO,cAAc,MAAM,OAAO,KAAK,OAAO;AACpD,QAAM,QAAkB,CAAA;AACxB,aAAW,SAAS,KAAK,MAAM,QAAQ;AACrC,eAAW,SAAS,KAAK,MAAM,QAAQ;AACrC,iBAAW,WAAW,KAAK,MAAM,UAAU,SAAS,KAAK,MAAM,YAAY,CAAC,aAAa,GAAG;AAC1F,cAAM,OAAO,iBAAiB,KAAK,MAAM,MAAM,EAAE,OAAO,OAAO,SAAS;AACxE,cAAM,OAAO,OAAO,QAAQ,IAAI,EAC7B,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,EACrC,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,KAAK,EAAE,QAAQ,WAAW,EAAE,CAAC,GAAG,EACtD,KAAK,IAAI;AACZ,YAAI,YAAY,KAAK,GAAG,cAAc,OAAO,OAAO,OAAO,CAAC;AAAA,EAAO,IAAI;AAAA,EAAK;AAAA,MAC9E;AAAA,IACF;AAAA,EACF;AACA,QAAM,SAA0B,OAAO,QAAQ,MAAM,IAAI,EACtD,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,EACrC,IAAI,CAAC,CAAC,MAAM,IAAI,MAAM;AACrB,UAAM,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,KAAK,KAAK,OAAO,IAAI,IAAI;AAC5D,WAAO,EAAE,MAAM,QAAQ,SAAS,IAAI,GAAG,MAAM,YAAY,MAAM,GAAG,eAAe,IAAI,GAAG,MAAM,YAAY,IAAI,GAAG,MAAM,GAAG,QAAQ,MAAM,OAAO,MAAM,OAAO,MAAM,KAAA;AAAA,EACpK,CAAC;AACH,SAAO,EAAE,UAAU,MAAM,UAAU,KAAK,MAAM,KAAK,IAAI,GAAG,QAAQ,UAAU,MAAM,QAAQ,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,UAAU,MAAM,UAAU,KAAA;AAC1I;AAGA,SAAS,WAAW,MAAqB,OAA+B;AACtE,MAAI,UAAU,OAAW,QAAO;AAChC,MAAI,SAAS,SAAS;AACpB,UAAM,IAAI,WAAW,KAAK;AAC1B,QAAI,CAAC,EAAG,QAAO;AACf,UAAM,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,GAAG,CAAC;AAChE,WAAO,EAAE,IAAI,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,MAAM,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;AAAA,EAC1E;AACA,SAAO,MAAM,QAAQ,WAAW,KAAK,KAAK;AAC5C;AAUO,SAAS,cAAc,MAAoB,QAAwB,MAAyE;AACjJ,QAAM,MAAsB,CAAA;AAC5B,aAAW,SAAS,OAAO,QAAQ;AACjC,UAAM,IAAI,WAAW,MAAM,MAAM,QAAQ,KAAK,KAAK,QAAQ,MAAM,MAAM,EAAE,GAAG,MAAM,WAAW,KAAK,KAAK,cAAA,CAAe,EAAE,KAAK;AAC7H,UAAM,IAAI,WAAW,MAAM,MAAM,QAAQ,OAAO,KAAK,QAAQ,MAAM,MAAM,EAAE,GAAG,MAAM,WAAW,OAAO,KAAK,cAAA,CAAe,EAAE,KAAK;AACjI,QAAI,MAAM,QAAQ,MAAM,QAAQ,MAAM,EAAG;AACzC,QAAI,KAAK,EAAE,OAAO,QAAQ,GAAG,OAAO,GAAG,OAAO,MAAM,SAAS,QAAA,CAAS;AAAA,EACxE;AACA,SAAO;AACT;"}

package/dist/useChangedElements.d.ts

@@ -0,0 +1,2 @@
+import { type DiffResult } from './outline';
+export declare function useChangedElements(on: boolean, live: HTMLLinkElement | HTMLStyleElement | null, vars: string[], screen: string, sheetIs?: 'before' | 'after'): DiffResult | null;

package/dist/useTogether.d.ts

@@ -0,0 +1,24 @@
+import { type TogetherFacts } from './github';
+import { type BridgeBuild, type NoDifference } from './session';
+import type { TogetherBase, TogetherPair, TogetherResult } from './together';
+export interface Together {
+    /** The changes in Studio's order, once read (null while reading). */
+    list: TogetherFacts[] | null;
+    error: boolean;
+    /** Switched on, in Studio's order. */
+    included: number[];
+    toggle: (n: number, on: boolean) => void;
+    result: TogetherResult | null;
+    /** Tokens each change edits (by path), whether or not its value is the one applied. */
+    editedBy: Map<number, string[]>;
+    pairs: TogetherPair[];
+    /** Nothing differs where the page is, but it does in another theme (or brand): say so, never a silent "After". */
+    noDiff: NoDifference | null;
+    /** The stylesheet with the combination, once in the page; its media switches sides. */
+    sheet: HTMLStyleElement | null;
+}
+export declare function useTogether(build: BridgeBuild, latest: (() => Promise<TogetherBase>) | null, changes: number[] | null, use: string | null, here: {
+    theme: string;
+    brand: string;
+    density: string;
+}, applied: boolean): Together | null;

package/package.json

@@ -1,6 +1,60 @@
 {
   "name": "@bridge-ds/toolbar",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "type": "module",
+  "description": "The Bridge toolbar for a product built with the Bridge design system: opened from Bridge Studio with ?bridge=<change>, it flips the real product between before and after and shows what changed.",
+  "license": "MIT",
+  "author": "Florian Gouloubi",
+  "homepage": "https://github.com/peterbono/ai-design-system-demo/tree/main/packages/toolbar#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/peterbono/ai-design-system-demo.git",
+    "directory": "packages/toolbar"
+  },
+  "bugs": {
+    "url": "https://github.com/peterbono/ai-design-system-demo/issues"
+  },
+  "keywords": [
+    "react",
+    "design-system",
+    "bridge",
+    "preview",
+    "before-after"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./together": {
+      "source": "./src/together.ts",
+      "types": "./dist/together.d.ts",
+      "default": "./dist/together.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "build:package": "node ../../scripts/build-packages.mjs toolbar"
+  },
+  "dependencies": {
+    "@bridge-ds/core": "^0.22.0",
+    "lucide-react": "1.58.0"
+  },
+  "peerDependencies": {
+    "@bridge-ds/react": ">=1.8.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}