@weasel-js/labkit 1.4.1 → 1.4.3

package/src/primitives/ZoomControl.less

@@ -13,7 +13,7 @@
   }
 }
 
-// Both children are weasel-ui components whose module classes set `width`.
+// The slider is a weasel-ui component whose module class sets `width`.
 // See the `.lk-root` prefix convention in theme/base.less.
 .lk-root {
   .lk-zoom {
@@ -24,8 +24,12 @@
       min-width: 64px;
     }
 
+    // `width: fit` sizes the field from this rather than from the input's
+    // 20-character intrinsic width. "800%" measures 33px against the 35px a
+    // 5ch box gives, which is no margin at all in another UI font; 6ch also
+    // holds the "1600%" a consumer raising `max` can reach.
     &__field {
-      width: 62px;
+      --wzl-number-field-width: 6ch;
     }
   }
 }

package/src/primitives/ZoomControl.tsx

@@ -60,6 +60,7 @@ export function ZoomControl({
           factor itself and renders 0.5 as "50%". */}
       <NumberField
         className="lk-zoom__field"
+        width="fit"
         aria-label="Zoom"
         value={zoom}
         minValue={min}

package/src/state/helpers.ts

@@ -58,7 +58,7 @@ export function deserializeTrials(
     const d = deserializers[r.instrumentName];
     return {
       ...r,
-      state: d?.deserialize ? d.deserialize(r.state) : r.state,
+      state: d?.deserialize ? d.deserialize(r.state, r.config) : r.state,
       undoStack: emptyUndoStack(),
     };
   });

package/src/state/store.test.ts

@@ -100,10 +100,114 @@ describe('updateTrialConfig', () => {
       state: {},
       view: { zoom: 1, pan: { x: 0, y: 0 } },
     });
-    s.getState().updateTrialConfig('w1', 'x' as never, 99 as never);
+    s.getState().updateTrialConfig('w1', 'x', 99);
     expect((s.getState().trials[0]?.config as { x: number }).x).toBe(99);
     expect((s.getState().trials[0]?.config as { y: number }).y).toBe(2);
   });
+
+  it('writes down a dotted path without disturbing its siblings', () => {
+    const s = makeStore();
+    const config = { grid: { size: 20, color: '#fff' }, showGrid: true };
+    s.getState().addTrial({
+      id: 'w1',
+      instrumentName: 'T',
+      config,
+      state: {},
+      view: { zoom: 1, pan: { x: 0, y: 0 } },
+    });
+    s.getState().updateTrialConfig('w1', 'grid.size', 40);
+    expect(s.getState().trials[0]?.config).toEqual({
+      grid: { size: 40, color: '#fff' },
+      showGrid: true,
+    });
+    // The record handed in is never mutated: a trial re-renders on identity.
+    expect(config.grid.size).toBe(20);
+  });
+});
+
+describe('createLabStore - config defaults', () => {
+  const stored = (config: unknown) =>
+    JSON.stringify({
+      version: CURRENT_DOCUMENT_VERSION,
+      trials: [
+        {
+          id: 'w1',
+          instrumentName: 'T',
+          config,
+          state: {},
+          view: { zoom: 1, pan: { x: 0, y: 0 } },
+        },
+      ],
+      saves: [
+        {
+          id: 's1',
+          name: 'saved',
+          trialId: 'w1',
+          instrumentName: 'T',
+          config,
+          state: {},
+          savedAt: 1,
+        },
+      ],
+      layout: {},
+      undockedPanels: {},
+      mode: 'auto',
+    });
+
+  it('fills a branch a config stored before the schema nested it never had', () => {
+    const storage = createMemoryAdapter();
+    storage.write(labDocumentKey('test'), stored({ showGrid: false, gridSize: 40 }));
+    const s = createLabStore({
+      storageKey: 'test',
+      storage,
+      configDefaults: { T: () => ({ showGrid: true, grid: { size: 20, color: '#fff' } }) },
+    });
+    expect(s.getState().trials[0]?.config).toEqual({
+      showGrid: false,
+      gridSize: 40,
+      grid: { size: 20, color: '#fff' },
+    });
+  });
+
+  it('fills the config on a saved snapshot the same way', () => {
+    const storage = createMemoryAdapter();
+    storage.write(labDocumentKey('test'), stored({ grid: { size: 40 } }));
+    const s = createLabStore({
+      storageKey: 'test',
+      storage,
+      configDefaults: { T: () => ({ grid: { size: 20, color: '#fff' } }) },
+    });
+    expect(s.getState().savedSnapshots[0]?.config).toEqual({
+      grid: { size: 40, color: '#fff' },
+    });
+  });
+
+  it('hands a deserializer the filled config, not the stored one', () => {
+    const storage = createMemoryAdapter();
+    storage.write(labDocumentKey('test'), stored({ grid: { size: 40 } }));
+    const seen: unknown[] = [];
+    createLabStore({
+      storageKey: 'test',
+      storage,
+      configDefaults: { T: () => ({ grid: { size: 20, color: '#fff' } }) },
+      serializers: {
+        T: {
+          deserialize: (state, config) => {
+            seen.push(config);
+            return state;
+          },
+        },
+      },
+    });
+    expect(seen).toEqual([{ grid: { size: 40, color: '#fff' } }]);
+  });
+
+  it('leaves a config alone when no defaults are registered for its instrument', () => {
+    const storage = createMemoryAdapter();
+    storage.write(labDocumentKey('test'), stored({ only: 1 }));
+    const s = createLabStore({ storageKey: 'test', storage });
+    expect(s.getState().trials[0]?.config).toEqual({ only: 1 });
+  });
 });
 
 describe('setMode', () => {
@@ -222,6 +326,56 @@ describe('persistence — hydration', () => {
     expect(hydrated.getState().trials).toHaveLength(1);
     expect((hydrated.getState().trials[0]?.state as { n: number }).n).toBe(7);
   });
+
+  // An instrument holding a Map, a Set or anything else JSON drops needs these
+  // to run at both ends. They are read while the store is being built, which
+  // is why they arrive as an option rather than being registered afterwards.
+  it("runs an instrument's serializers at flush and at hydrate", () => {
+    vi.useFakeTimers();
+    const mem = createMemoryAdapter();
+    const serializers = {
+      T: {
+        serialize: (state: unknown) => [...(state as Map<string, number>)],
+        deserialize: (data: unknown) => new Map(data as [string, number][]),
+      },
+    };
+
+    const seed = createLabStore({ storageKey: 'test', storage: mem, serializers });
+    seed.getState().addTrial({
+      id: 'w1',
+      instrumentName: 'T',
+      config: {},
+      state: new Map([['a', 1]]),
+      view: { zoom: 1, pan: { x: 0, y: 0 } },
+    });
+    vi.advanceTimersByTime(500);
+    vi.useRealTimers();
+
+    const written = mem.read(labDocumentKey('test')) ?? '';
+    expect(written).toContain('[["a",1]]');
+
+    const hydrated = createLabStore({ storageKey: 'test', storage: mem, serializers });
+    expect(hydrated.getState().trials[0]?.state).toEqual(new Map([['a', 1]]));
+  });
+
+  it('hands `deserialize` the config the state was saved against', () => {
+    vi.useFakeTimers();
+    const mem = createMemoryAdapter();
+    const deserialize = vi.fn((data: unknown) => data);
+    const seed = createLabStore({ storageKey: 'test', storage: mem });
+    seed.getState().addTrial({
+      id: 'w1',
+      instrumentName: 'T',
+      config: { scale: 4 },
+      state: { n: 1 },
+      view: { zoom: 1, pan: { x: 0, y: 0 } },
+    });
+    vi.advanceTimersByTime(500);
+    vi.useRealTimers();
+
+    createLabStore({ storageKey: 'test', storage: mem, serializers: { T: { deserialize } } });
+    expect(deserialize).toHaveBeenCalledWith({ n: 1 }, { scale: 4 });
+  });
 });
 
 describe('persistence — debounced writes', () => {
@@ -673,3 +827,81 @@ describe('undocking a sidebar panel', () => {
     expect(s.getState().undockedPanels).toEqual({});
   });
 });
+
+describe('setTrialTitle', () => {
+  it('holds a title and returns to the instrument name on null', () => {
+    const s = makeStore();
+    s.getState().addTrial({ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW });
+    s.getState().setTrialTitle('w1', 'Sprocket 7');
+    expect(s.getState().trials[0]?.title).toBe('Sprocket 7');
+    s.getState().setTrialTitle('w1', null);
+    expect(s.getState().trials[0]?.title).toBeUndefined();
+  });
+
+  it('leaves the record alone when the title is unchanged', () => {
+    const s = makeStore();
+    s.getState().addTrial({ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW });
+    s.getState().setTrialTitle('w1', 'Sprocket 7');
+    const before = s.getState().trials[0];
+    s.getState().setTrialTitle('w1', 'Sprocket 7');
+    expect(s.getState().trials[0]).toBe(before);
+  });
+
+  it('round-trips through storage', () => {
+    vi.useFakeTimers();
+    const storage = createMemoryAdapter();
+    const first = makeStore({ storage });
+    first.getState().addTrial({ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW });
+    first.getState().setTrialTitle('w1', 'Sprocket 7');
+    vi.advanceTimersByTime(400);
+    vi.useRealTimers();
+
+    expect(makeStore({ storage }).getState().trials[0]?.title).toBe('Sprocket 7');
+  });
+});
+
+describe('setTrialSectionCollapsed', () => {
+  it('folds one section without touching the others', () => {
+    const s = makeStore();
+    s.getState().addTrial({ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW });
+    s.getState().setTrialSectionCollapsed('w1', 'settings', true);
+    s.getState().setTrialSectionCollapsed('w1', 'marks', false);
+    expect(s.getState().trials[0]?.collapsedSections).toEqual({ settings: true, marks: false });
+  });
+
+  it('leaves the record alone when the fold is unchanged', () => {
+    const s = makeStore();
+    s.getState().addTrial({ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW });
+    s.getState().setTrialSectionCollapsed('w1', 'settings', true);
+    const before = s.getState().trials[0];
+    s.getState().setTrialSectionCollapsed('w1', 'settings', true);
+    expect(s.getState().trials[0]).toBe(before);
+  });
+
+  it('round-trips through storage', () => {
+    vi.useFakeTimers();
+    const storage = createMemoryAdapter();
+    const first = makeStore({ storage });
+    first.getState().addTrial({ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW });
+    first.getState().setTrialSectionCollapsed('w1', 'settings/Shape', true);
+    vi.advanceTimersByTime(400);
+    vi.useRealTimers();
+
+    expect(makeStore({ storage }).getState().trials[0]?.collapsedSections).toEqual({
+      'settings/Shape': true,
+    });
+  });
+
+  it('hydrates a version-3 trial, which carries neither field', () => {
+    const storage = createMemoryAdapter();
+    writeDocument(storage, {
+      trials: [{ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW }],
+      saves: [],
+      layout: {},
+      mode: 'auto',
+    });
+    const trial = makeStore({ storage }).getState().trials[0];
+    expect(trial?.title).toBeUndefined();
+    expect(trial?.collapsedSections).toBeUndefined();
+  });
+});

package/src/state/store.ts

@@ -1,4 +1,5 @@
 import { createStore, type StoreApi } from 'zustand/vanilla';
+import { fillConfigDefaults, withValueAtPath } from '../config/path';
 import {
   CURRENT_DOCUMENT_VERSION,
   deleteLegacyKeys,
@@ -13,7 +14,6 @@ import {
 import { deserializeTrials, emptyUndoStack, serializeTrials } from './helpers';
 import type {
   CreateLabStoreOptions,
-  InstrumentSerializers,
   LabDocument,
   LabMode,
   LabStoreState,
@@ -32,9 +32,15 @@ export interface LabStoreActions {
   addTrial: (record: Omit<TrialRecord, 'undoStack'>) => void;
   removeTrial: (id: string) => void;
   updateTrialState: <TS>(id: string, next: TS | ((prev: TS) => TS)) => void;
-  updateTrialConfig: <TC>(id: string, key: keyof TC, value: TC[keyof TC]) => void;
+  /** Write one config value. `path` is dotted for a value nested under an
+   *  `f.group`, and the bare key for one at the root. */
+  updateTrialConfig: (id: string, path: string, value: unknown) => void;
   updateTrialView: (id: string, view: unknown) => void;
   updateTrialSidebarWidth: (id: string, width: number) => void;
+  /** Retitle a trial. `null` returns it to its instrument's name. */
+  setTrialTitle: (id: string, title: string | null) => void;
+  /** Fold or unfold one of a trial's sections. */
+  setTrialSectionCollapsed: (id: string, key: string, collapsed: boolean) => void;
   updateTrialAnnotations: (id: string, doc: unknown) => void;
   updateTrialUndoStack: (
     id: string,
@@ -55,16 +61,14 @@ export interface LabStoreActions {
   dockPanel: (trialId: string, sectionId?: string) => void;
 }
 
-/** A lab's store: its state and actions, plus the hook instruments use to
- *  register how their state is serialized. */
-export type LabStore = StoreApi<LabStoreState & LabStoreActions> & {
-  registerSerializers: (s: InstrumentSerializers) => void;
-};
+/** A lab's store: its state and its actions. How each instrument's state is
+ *  serialized comes in through `CreateLabStoreOptions.serializers`. */
+export type LabStore = StoreApi<LabStoreState & LabStoreActions>;
 
 /** Build a lab store, hydrating from storage if anything was saved under the
  *  same key. Writes back are debounced. */
 export function createLabStore(options: CreateLabStoreOptions): LabStore {
-  let serializers: InstrumentSerializers = {};
+  const serializers = options.serializers ?? {};
   let flushTimer: ReturnType<typeof setTimeout> | null = null;
 
   const hydration = hydrateDocument(options);
@@ -73,8 +77,20 @@ export function createLabStore(options: CreateLabStoreOptions): LabStore {
   // Cleared once the legacy keys are actually gone; see the flush.
   let foldedFromLegacy = hydration.foldedFromLegacy;
 
-  const hydratedTrials = deserializeTrials(hydrated.trials, serializers);
-  const hydratedSnapshots = hydrated.saves;
+  const configDefaults = options.configDefaults ?? {};
+  const filled = (instrumentName: string, config: unknown): unknown => {
+    const defaults = configDefaults[instrumentName];
+    return defaults ? fillConfigDefaults(config, defaults()) : config;
+  };
+
+  const hydratedTrials = deserializeTrials(
+    hydrated.trials.map((t) => ({ ...t, config: filled(t.instrumentName, t.config) })),
+    serializers,
+  );
+  const hydratedSnapshots = hydrated.saves.map((sn) => ({
+    ...sn,
+    config: filled(sn.instrumentName, sn.config),
+  }));
   const hydratedLayout = hydrated.layout;
   const hydratedMode = hydrated.mode;
 
@@ -117,15 +133,11 @@ export function createLabStore(options: CreateLabStoreOptions): LabStore {
       scheduleFlush();
     },
 
-    updateTrialConfig: (id, key, value) => {
+    updateTrialConfig: (id, path, value) => {
       set((s) => ({
-        trials: s.trials.map((w) => {
-          if (w.id !== id) return w;
-          return {
-            ...w,
-            config: { ...(w.config as Record<string, unknown>), [key as string]: value },
-          };
-        }),
+        trials: s.trials.map((w) =>
+          w.id === id ? { ...w, config: withValueAtPath(w.config, path, value) } : w,
+        ),
       }));
       scheduleFlush();
     },
@@ -146,6 +158,29 @@ export function createLabStore(options: CreateLabStoreOptions): LabStore {
       scheduleFlush();
     },
 
+    setTrialTitle: (id, title) => {
+      set((s) => ({
+        trials: s.trials.map((w) => {
+          if (w.id !== id) return w;
+          const next = title === null ? undefined : title;
+          if ((w.title ?? undefined) === next) return w;
+          return { ...w, title: next };
+        }),
+      }));
+      scheduleFlush();
+    },
+
+    setTrialSectionCollapsed: (id, key, collapsed) => {
+      set((s) => ({
+        trials: s.trials.map((w) => {
+          if (w.id !== id) return w;
+          if (w.collapsedSections?.[key] === collapsed) return w;
+          return { ...w, collapsedSections: { ...w.collapsedSections, [key]: collapsed } };
+        }),
+      }));
+      scheduleFlush();
+    },
+
     updateTrialAnnotations: (id, doc) => {
       set((s) => ({
         trials: s.trials.map((w) =>
@@ -210,7 +245,9 @@ export function createLabStore(options: CreateLabStoreOptions): LabStore {
         return;
       }
       const reg = serializers[snapshot.instrumentName];
-      const restoredState = reg?.deserialize ? reg.deserialize(snapshot.state) : snapshot.state;
+      const restoredState = reg?.deserialize
+        ? reg.deserialize(snapshot.state, snapshot.config)
+        : snapshot.state;
       set((s) => ({
         trials: s.trials.map((w) =>
           w.id === trialId ? { ...w, state: restoredState, config: snapshot.config } : w,
@@ -286,11 +323,7 @@ export function createLabStore(options: CreateLabStoreOptions): LabStore {
   // fold; the flush is what removes the legacy keys.
   if (foldedFromLegacy) scheduleFlush();
 
-  return Object.assign(store, {
-    registerSerializers(s: InstrumentSerializers) {
-      serializers = s;
-    },
-  });
+  return store;
 }
 
 interface HydrateResult {

package/src/state/types.ts

@@ -1,3 +1,4 @@
+import type { ConfigPath, ValueAtPath } from '../config/types';
 import type { UndockedPanels } from './undock';
 /** A trial's undo history, as snapshots of its state either side of the
  *  present. */
@@ -6,6 +7,15 @@ export interface UndoStack {
   future: unknown[];
 }
 
+/** The trial a per-trial call is coming from. `id` is the id `useTileId`
+ *  scopes a surface tile under, so a consumer keying its own per-trial
+ *  registry and labkit's tiles agree on the key. */
+export interface TrialInfo<TV = unknown> {
+  id: string;
+  /** The trial's view, in whatever shape the instrument keeps it. */
+  view: TV;
+}
+
 /** One trial as the store holds it: which instrument it runs, that
  *  instrument's config and state, the camera, and the undo history. */
 export interface TrialRecord<TS = unknown, TC = unknown, TV = unknown> {
@@ -16,11 +26,22 @@ export interface TrialRecord<TS = unknown, TC = unknown, TV = unknown> {
   /** Opaque to labkit: persisted, restored on Reset and handed to the instrument,
    *  but never read into. A 3D lab puts an orbit here and keeps all three. */
   view: TV;
+  /** The config `addTrial` opened this trial on, overlaid on the instrument's
+   *  defaults. Kept so Reset restores the trial's own subject rather than the
+   *  bare defaults. */
+  configSeed?: Partial<TC>;
   /** This trial's own tool slot. Undefined means it reads the lab's. */
   activeToolId?: string | null;
   /** The extent the trial's sidebar was last dragged to, in pixels. Undefined
    *  until someone moves the seam. */
   sidebarWidth?: number;
+  /** What the title bar reads. Undefined — the state a trial opens in, and the
+   *  one `setTitle(null)` returns it to — means the instrument's name. */
+  title?: string | null;
+  /** Which of the trial's collapsible sections are folded, keyed as
+   *  `TrialChromeContext.collapsedSections` describes. A key that is absent
+   *  takes the section's own default. */
+  collapsedSections?: Record<string, boolean>;
   /** The marks on this trial's annotation targets, as `AnnotationsApi.toJSON`
    *  wrote them. Opaque here, and absent for a trial whose instrument declares
    *  no `annotations` — or declares its own `storage`. Not in `state`, which
@@ -75,7 +96,9 @@ export interface TrialStateHandle<TS, TC> {
   state: TS;
   setState: (next: TS | ((prev: TS) => TS)) => void;
   config: TC;
-  setConfig: (key: keyof TC, value: TC[keyof TC]) => void;
+  /** Write one config value, by dotted path — `'grid.size'` for a leaf under
+   *  an `f.group`, `'cellSize'` for one at the root. */
+  setConfig: <P extends ConfigPath<TC> & string>(path: P, value: ValueAtPath<TC, P>) => void;
 }
 
 /** Options for `createLabStore`. `storageKey` namespaces the keys written, so
@@ -84,13 +107,31 @@ export interface CreateLabStoreOptions {
   storageKey: string;
   storage: StorageAdapter;
   initialMode?: LabMode;
+  /** Each instrument's default config, keyed by instrument name, used to fill
+   *  the gaps in a stored one. A config saved before its schema grew a branch
+   *  arrives holding that branch's defaults rather than `undefined`, and keeps
+   *  whatever keys the schema has since stopped naming. `<Lab>` collects these
+   *  off its `instruments`. */
+  configDefaults?: Record<string, () => unknown>;
+  /** How each instrument's state survives a reload. Hydration is the first
+   *  thing `createLabStore` does, so these have to arrive with the store —
+   *  anything registered afterwards is already too late to read the document
+   *  it was built from. `<Lab>` collects them off its `instruments`. */
+  serializers?: InstrumentSerializers;
 }
 
 /** Per-instrument serialize/deserialize hooks, keyed by instrument name. An
- *  instrument whose state is already JSON-safe needs no entry. */
+ *  instrument whose state is already JSON-safe needs no entry. `deserialize`
+ *  is handed the config the state was saved against — a trial's own for a
+ *  reload, the snapshot's for a load — since a state rebuilt without it can
+ *  disagree with the settings sitting next to it. */
 export type InstrumentSerializers = Record<
   string,
-  { serialize?: (state: unknown) => unknown; deserialize?: (data: unknown) => unknown } | undefined
+  | {
+      serialize?: (state: unknown) => unknown;
+      deserialize?: (data: unknown, config: unknown) => unknown;
+    }
+  | undefined
 >;
 
 /** A trial as it is persisted: everything but the undo history, which is

package/src/state/useTrialState.ts

@@ -24,6 +24,6 @@ export function useTrialState<TS = unknown, TC = unknown>(): TrialStateHandle<TS
     state: record.state as TS,
     config: record.config as TC,
     setState: (next) => updateTrialState(trialId, next as Parameters<typeof updateTrialState>[1]),
-    setConfig: (key, value) => updateTrialConfig(trialId, key as never, value as never),
+    setConfig: (path, value) => updateTrialConfig(trialId, path, value),
   };
 }

package/src/trial/Trial.config.test.tsx

@@ -106,3 +106,47 @@ describe('lab-wide config seams', () => {
     expect(screen.queryByText('Settings')).not.toBeInTheDocument();
   });
 });
+
+describe('a nested config value, end to end', () => {
+  const nestedInstrument = () => {
+    const seen: { config: unknown; prev: unknown }[] = [];
+    const instrument = defineInstrument({
+      name: 'Nested',
+      config: f.schema({
+        showGrid: f.boolean(true),
+        grid: f.group({ size: f.number(20).label('Cell size'), color: f.color('#ffffff') }),
+      }),
+      initialState: () => ({}),
+      onConfigChange: (config, prev, state) => {
+        seen.push({ config, prev });
+        return state;
+      },
+      render: (ctx) => (
+        <output>{String((ctx.config as { grid: { size: number } }).grid.size)}</output>
+      ),
+    });
+    return { instrument, seen };
+  };
+
+  it('renders a nested leaf and writes the change back into the tree', () => {
+    const { instrument } = nestedInstrument();
+    render(<Lab instruments={[instrument]} defaultInstrument="Nested" />);
+    expect(screen.getByText('20')).toBeInTheDocument();
+    fireEvent.change(screen.getByLabelText('Cell size'), { target: { value: '40' } });
+    expect(screen.getByText('40')).toBeInTheDocument();
+  });
+
+  it('hands onConfigChange the whole tree, with the sibling branch intact', () => {
+    const { instrument, seen } = nestedInstrument();
+    render(<Lab instruments={[instrument]} defaultInstrument="Nested" />);
+    fireEvent.change(screen.getByLabelText('Cell size'), { target: { value: '40' } });
+    expect(seen.at(-1)?.config).toEqual({
+      showGrid: true,
+      grid: { size: 40, color: '#ffffff' },
+    });
+    expect(seen.at(-1)?.prev).toEqual({
+      showGrid: true,
+      grid: { size: 20, color: '#ffffff' },
+    });
+  });
+});

package/src/trial/Trial.less

@@ -164,10 +164,14 @@
   }
 }
 
+.lk-trial__titlebar-lead,
 .lk-trial__titlebar-actions {
   display: inline-flex;
   align-items: center;
   gap: 2px;
+}
+
+.lk-trial__titlebar-actions {
   margin-left: auto;
 }