@qoretechnologies/reqraft 0.10.25 → 0.10.26

package/src/components/menu/Menu.stories.tsx

@@ -27,6 +27,14 @@ export const Basic: Story = {
   args: {
     menu: typedMenu,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu with the mock Qorus navigation — sections and items appear in the sidebar with no active path highlighted.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('Interfaces & More');
   },
@@ -36,6 +44,14 @@ export const ActivePath: Story = {
     path: '/Interfaces/mapper',
     menu: typedMenu,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu with the /Interfaces/mapper path — the matching menu entry is highlighted as active.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('Interfaces & More');
   },
@@ -47,6 +63,14 @@ export const ActiveMenuItemIntent: Story = {
     menu: typedMenu,
     activeItemIntent: 'success',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu with the /Interfaces/mapper path and a "success" activeItemIntent — the active entry uses the success intent for its highlight colour.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('Interfaces & More');
   },
@@ -57,6 +81,14 @@ export const WithDefaultQuery: Story = {
     menu: typedMenu,
     defaultQuery: 'mapper',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu with a defaultQuery of "mapper" — the search input is pre-filled and the visible items are narrowed to those matching the query.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('Interfaces & More');
     await expect(document.querySelector('.reqore-input')).toHaveValue('mapper');
@@ -69,6 +101,14 @@ export const Filtered: Story = {
     menu: typedMenu,
     onQueryChange: fn(),
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu with an onQueryChange handler. Typing "step" into the search filter narrows the visible items to just the matching entries.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('Interfaces & More');
     await fireEvent.change(document.querySelector('.reqore-input'), { target: { value: 'step' } });
@@ -82,6 +122,12 @@ export const Filtered: Story = {
 export const WidthFromStorage: Story = {
   ...ActivePath,
   parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu backed by user storage that already holds a persisted width — the menu mounts at the stored width rather than the default.',
+      },
+    },
     mockData: [...storiesStorageMock],
   },
 };
@@ -93,6 +139,14 @@ export const WithCustomChildren: Story = {
     topChildren: <div style={{ padding: 10 }}>Top Custom Child</div>,
     bottomChildren: <div style={{ padding: 10 }}>Bottom Custom Child</div>,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu with topChildren and bottomChildren slots — custom nodes appear above and below the menu list.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('Interfaces & More');
     await testsWaitForText('Top Custom Child');

package/src/components/qonsoleSmartInput/QonsoleSmartInput.stories.tsx

@@ -1,6 +1,6 @@
 import { StoryObj } from '@storybook/react-vite';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import { useState } from 'react';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import { sleep } from '../../../__tests__/utils';
 import { StoryMeta } from '../../types';
 import {
@@ -83,14 +83,16 @@ function mockTokenizeQonsole(text: string): number[] {
   for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
     const line = lines[lineIdx];
     // Strings first so they swallow any `--`/digits inside their quotes.
-    const TOKEN_RE =
-      /("(?:\\.|[^"\\])*")|(\d+(?:\.\d+)?)|(--[A-Za-z][\w-]*)|(\/[A-Za-z][\w-]*)/g;
+    const TOKEN_RE = /("(?:\\.|[^"\\])*")|(\d+(?:\.\d+)?)|(--[A-Za-z][\w-]*)|(\/[A-Za-z][\w-]*)/g;
     let match: RegExpExecArray | null;
     while ((match = TOKEN_RE.exec(line)) !== null) {
       let type = -1;
-      if (match[1]) type = 11; // string
-      else if (match[2]) type = 12; // number
-      else if (match[3]) type = 9; // modifier — `--flag`
+      if (match[1])
+        type = 11; // string
+      else if (match[2])
+        type = 12; // number
+      else if (match[3])
+        type = 9; // modifier — `--flag`
       else if (match[4]) type = 8; // keyword — `/verb`
       if (type >= 0) {
         tokens.push({
@@ -102,7 +104,7 @@ function mockTokenizeQonsole(text: string): number[] {
       }
     }
   }
-  tokens.sort((a, b) => (a.line - b.line) || (a.char - b.char));
+  tokens.sort((a, b) => a.line - b.line || a.char - b.char);
   // Delta-encode per LSP spec.
   const data: number[] = [];
   let prevLine = 0;
@@ -127,11 +129,7 @@ function setupBasicQonsoleMockServer(): IMockLspServer {
       experimental: {
         qonsole: {
           version: '1.0',
-          methods: [
-            'qonsole/assist',
-            'qonsole/validate',
-            'qonsole/setContext',
-          ],
+          methods: ['qonsole/assist', 'qonsole/validate', 'qonsole/setContext'],
         },
       },
     },
@@ -213,8 +211,7 @@ function setupBasicQonsoleMockServer(): IMockLspServer {
                   short_desc: 'Guided setup for a new connection',
                   verb: 'create',
                   resource: 'connections',
-                  start_path:
-                    '/api/latest/qonsole/wizards/create-connection/start',
+                  start_path: '/api/latest/qonsole/wizards/create-connection/start',
                 },
                 command: {
                   title: 'Start Create connection wizard',
@@ -227,8 +224,7 @@ function setupBasicQonsoleMockServer(): IMockLspServer {
                       short_desc: 'Guided setup for a new connection',
                       verb: 'create',
                       resource: 'connections',
-                      start_path:
-                        '/api/latest/qonsole/wizards/create-connection/start',
+                      start_path: '/api/latest/qonsole/wizards/create-connection/start',
                     },
                   ],
                 },
@@ -237,10 +233,34 @@ function setupBasicQonsoleMockServer(): IMockLspServer {
             ];
           } else if (ctx.type === 'resource') {
             items = [
-              withTextEdit({ label: 'services', insertText: 'services', kind: 7, detail: 'Service interfaces', commitCharacters: [' '] }),
-              withTextEdit({ label: 'workflows', insertText: 'workflows', kind: 7, detail: 'Workflow interfaces', commitCharacters: [' '] }),
-              withTextEdit({ label: 'jobs', insertText: 'jobs', kind: 7, detail: 'Job interfaces', commitCharacters: [' '] }),
-              withTextEdit({ label: 'users', insertText: 'users', kind: 7, detail: 'IDP users', commitCharacters: [' '] }),
+              withTextEdit({
+                label: 'services',
+                insertText: 'services',
+                kind: 7,
+                detail: 'Service interfaces',
+                commitCharacters: [' '],
+              }),
+              withTextEdit({
+                label: 'workflows',
+                insertText: 'workflows',
+                kind: 7,
+                detail: 'Workflow interfaces',
+                commitCharacters: [' '],
+              }),
+              withTextEdit({
+                label: 'jobs',
+                insertText: 'jobs',
+                kind: 7,
+                detail: 'Job interfaces',
+                commitCharacters: [' '],
+              }),
+              withTextEdit({
+                label: 'users',
+                insertText: 'users',
+                kind: 7,
+                detail: 'IDP users',
+                commitCharacters: [' '],
+              }),
             ];
           } else if (ctx.type === 'flag') {
             items = [
@@ -275,9 +295,24 @@ function setupBasicQonsoleMockServer(): IMockLspServer {
             ];
           } else if (ctx.type === 'flag-value') {
             items = [
-              withTextEdit({ label: 'qorus', insertText: 'qorus', kind: 12, detail: 'Qorus core app' }),
-              withTextEdit({ label: 'qorus-ide', insertText: 'qorus-ide', kind: 12, detail: 'Qorus IDE' }),
-              withTextEdit({ label: 'qorus-creator', insertText: 'qorus-creator', kind: 12, detail: 'Qorus Creator' }),
+              withTextEdit({
+                label: 'qorus',
+                insertText: 'qorus',
+                kind: 12,
+                detail: 'Qorus core app',
+              }),
+              withTextEdit({
+                label: 'qorus-ide',
+                insertText: 'qorus-ide',
+                kind: 12,
+                detail: 'Qorus IDE',
+              }),
+              withTextEdit({
+                label: 'qorus-creator',
+                insertText: 'qorus-creator',
+                kind: 12,
+                detail: 'Qorus Creator',
+              }),
             ];
           }
         }
@@ -363,6 +398,14 @@ export const BasicMock: Story = {
   args: {
     initialValue: '/list services ',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the QonsoleSmartInput against a mocked Qonsole LSP. Typing "-" after "/list services " opens the flag dropdown with --desc, --limit and --search; pressing Enter accepts the first item without producing a stray double dash.',
+      },
+    },
+  },
   async beforeEach() {
     const server = setupBasicQonsoleMockServer();
     return () => server.close();
@@ -474,6 +517,12 @@ export const LiveQonsoleWithContext: Story = {
   },
   parameters: {
     chromatic: { disable: true },
+    docs: {
+      description: {
+        story:
+          'Renders the QonsoleSmartInput against the real Qonsole LSP with a pre-bound "/use services" context — predictive text is scoped to the services resource via the qonsole/setContext call.',
+      },
+    },
   },
 };
 
@@ -520,8 +569,7 @@ export const WithDiagnostics: Story = {
                   start: { line: 0, character: 6 },
                   end: { line: 0, character: 14 },
                 },
-                message:
-                  'Unknown resource "services" — did you mean "service"?',
+                message: 'Unknown resource "services" — did you mean "service"?',
                 severity: 1,
               },
               {
@@ -676,9 +724,9 @@ export const WithWizardItems: Story = {
       () => {
         const dropdown = document.querySelector('.reqore-menu');
         expect(dropdown).not.toBeNull();
-        const item = Array.from(
-          document.querySelectorAll('.reqore-menu-item')
-        ).find((el) => el.textContent?.includes('Create connection'));
+        const item = Array.from(document.querySelectorAll('.reqore-menu-item')).find((el) =>
+          el.textContent?.includes('Create connection')
+        );
         expect(item).toBeDefined();
       },
       { timeout: 30000 }
@@ -701,7 +749,6 @@ export const WithWizardItems: Story = {
  */
 export const SelectingWizardItemFiresCallback: Story = {
   args: {
-    initialValue: '/',
     onWizardStart: fn(),
   },
   parameters: {
@@ -727,23 +774,22 @@ export const SelectingWizardItemFiresCallback: Story = {
     await userEvent.type(editable, '/');
     await waitFor(
       () => {
-        const item = Array.from(
-          document.querySelectorAll('.reqore-menu-item')
-        ).find((el) => el.textContent?.includes('Create connection'));
+        const item = Array.from(document.querySelectorAll('.reqore-menu-item')).find((el) =>
+          el.textContent?.includes('Create connection')
+        );
         expect(item).toBeDefined();
       },
       { timeout: 30000 }
     );
-    const wizardItem = Array.from(
-      document.querySelectorAll('.reqore-menu-item')
-    ).find((el) => el.textContent?.includes('Create connection'));
+    const wizardItem = Array.from(document.querySelectorAll('.reqore-menu-item')).find((el) =>
+      el.textContent?.includes('Create connection')
+    );
     await userEvent.click(wizardItem as HTMLElement);
     // The callback fired with the wizard descriptor...
     await waitFor(() => expect(args.onWizardStart).toHaveBeenCalled(), {
       timeout: 30000,
     });
-    const callArg = (args.onWizardStart as ReturnType<typeof fn>).mock
-      .calls[0][0];
+    const callArg = (args.onWizardStart as ReturnType<typeof fn>).mock.calls[0][0];
     expect(callArg).toMatchObject({ action: 'start-wizard' });
     // ...and NO text was inserted (wizard launch ≠ completion insert).
     expect(editable.textContent).toBe('/');

package/src/components/searchFilterBar/SearchFilterBar.tsx

@@ -0,0 +1,131 @@
+import { ReqoreControlGroup, ReqoreDropdown, ReqoreInput } from '@qoretechnologies/reqore';
+import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
+import styled, { css } from 'styled-components';
+
+/*
+ * A search box with filter dropdowns beside it — the strip that sits above a list
+ * and narrows it.
+ *
+ * This existed twice, built independently either side of the package boundary: the
+ * ticket list in qorus-ide and the References tab here in reqraft. Same
+ * composition (ReqoreControlGroup > ReqoreInput + N ReqoreDropdowns), but they had
+ * drifted — one sized the group, the other sized each control; one wrapped, the
+ * other stacked; one moved the dropdown caret to the right slot and suppressed the
+ * default, the other did not. Two strips that should be indistinguishable ended up
+ * visibly different, and any fix had to be made twice.
+ *
+ * It lives in reqraft rather than Reqore because it is a composition of Reqore
+ * primitives, not a new primitive — there is nothing here Reqore is missing.
+ *
+ * The frosted container is part of the component, not the caller's job. Extracting
+ * only the controls left the two surfaces still looking different: one bar sat in a
+ * bordered, blurred card, the other bare on the page. If the bar is meant to read
+ * the same everywhere then its own chrome has to travel with it.
+ */
+
+const Container = styled.div<{ $sticky?: boolean }>`
+  padding: 8px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(6px);
+
+  ${({ $sticky }) =>
+    $sticky &&
+    css`
+      position: sticky;
+      top: 0;
+      z-index: 2;
+    `}
+`;
+
+export interface ISearchFilterOption {
+  label: string;
+  icon?: IReqoreIconName;
+  selected?: boolean;
+  onClick: () => void;
+}
+
+export interface ISearchFilter {
+  /** Icon for the trigger — usually the selected option's. */
+  icon?: IReqoreIconName;
+  /** Trigger label — usually the selected option's. */
+  label: string;
+  items: ISearchFilterOption[];
+}
+
+export interface ISearchFilterBarProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  filters?: ISearchFilter[];
+  /**
+   * Stack the search over its filters. On a phone the box and two dropdowns
+   * cannot share a row without the input collapsing to a few characters, so the
+   * caller passes its own breakpoint result rather than this guessing.
+   */
+  stacked?: boolean;
+  /**
+   * Pin the bar to the top of its scroll container. For a bar inside a scrolling
+   * panel (the References tab); a bar above a page-level list does not need it.
+   */
+  sticky?: boolean;
+}
+
+export const SearchFilterBar = ({
+  value,
+  onChange,
+  placeholder,
+  filters = [],
+  stacked,
+  sticky,
+}: ISearchFilterBarProps) => (
+  <Container $sticky={sticky}>
+    {/* `size='small'` on the GROUP, not per control: the bar filters the content, it
+        is not content — at the default size the dropdowns read as primary actions and
+        crowd the search field. */}
+    <ReqoreControlGroup
+      fluid
+      wrap
+      gapSize='small'
+      size='small'
+      vertical={stacked}
+      verticalAlign={stacked ? undefined : 'center'}
+    >
+      <ReqoreInput
+        icon='Search2Line'
+        placeholder={placeholder}
+        value={value}
+        onChange={(event) => onChange((event.currentTarget as HTMLInputElement).value)}
+        onClearClick={value ? () => onChange('') : undefined}
+        minimal
+        fluid
+      />
+      {filters.length ?
+        <ReqoreControlGroup gapSize='small' size='small' fluid={stacked}>
+          {filters.map((filter, index) => (
+            <ReqoreDropdown
+              key={index}
+              icon={filter.icon}
+              label={filter.label}
+              minimal
+              flat
+              /* stretch to share the row when stacked; hug the label otherwise */
+              fixed={!stacked}
+              /* the caret defaults to the LEFT slot, where the filter's own icon
+               already sits — without this each trigger shows two glyphs */
+              rightIcon='ArrowDownSLine'
+              showCaret={false}
+              items={filter.items.map((item) => ({
+                label: item.label,
+                icon: item.icon,
+                selected: item.selected,
+                onClick: item.onClick,
+              }))}
+            />
+          ))}
+        </ReqoreControlGroup>
+      : null}
+    </ReqoreControlGroup>
+  </Container>
+);

package/src/components/searchFilterBar/index.ts

@@ -0,0 +1 @@
+export * from './SearchFilterBar';

package/src/components/smartEditor/SmartEditor.stories.tsx

@@ -72,6 +72,14 @@ export const BasicMock: Story = {
     initialValue: '',
     triggerCharacters: new Set([' ', '.']),
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SmartEditor against a mocked LSP server. Typing the "." trigger character sends a completion request and the dropdown mounts with the apple and banana suggestions.',
+      },
+    },
+  },
   async beforeEach() {
     const lsp = createMockLspServer(MOCK_LSP_URL, {
       capabilities: {},
@@ -295,6 +303,14 @@ export const WithDiagnostics: Story = {
     languageId: 'demo',
     initialValue: 'list services in pricing',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SmartEditor against a mocked LSP server that pushes diagnostics on didOpen — the text is decorated with wavy underlines and the stacked message panel below the editor lists both diagnostics.',
+      },
+    },
+  },
   async beforeEach() {
     const lsp = createMockLspServer(MOCK_LSP_URL, {
       capabilities: {},
@@ -342,6 +358,14 @@ export const ReadOnly: Story = {
     initialValue: 'frozen content',
     readOnly: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SmartEditor in read-only mode over an initial value — the Slate editor mounts as contenteditable=false so the content shows but cannot be edited.',
+      },
+    },
+  },
   async beforeEach() {
     const lsp = createMockLspServer(MOCK_LSP_URL, { capabilities: {} });
     return () => lsp.close();
@@ -367,6 +391,14 @@ export const LoadingOverlay: Story = {
     languageId: 'demo',
     initialValue: 'visible under the overlay',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SmartEditor against a mock LSP that never finishes initialize — the "Connecting to language server" overlay stays over the editor for the whole session.',
+      },
+    },
+  },
   async beforeEach() {
     const lsp = createMockLspServer(MOCK_LSP_URL, {
       capabilities: {},

package/src/components/supportTicket/AttachmentChips.stories.tsx

@@ -0,0 +1,171 @@
+import { StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+import { StoryMeta } from '../../types';
+import { AttachmentChips } from './AttachmentChips';
+
+/**
+ * Staged-file chips for a ticket composer. Image files show a thumbnail and open the shared
+ * `ImageLightbox` on click; other files show a paperclip. The pencil renames a file inline
+ * (a File name is read-only, so the host swaps in a renamed copy); the ✕ removes it.
+ */
+const meta = {
+  component: AttachmentChips,
+  title: 'Components/AttachmentChips',
+} as StoryMeta<typeof AttachmentChips>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const imageFile = (label: string, hue: number, name: string): File => {
+  const svg =
+    `<svg xmlns='http://www.w3.org/2000/svg' width='640' height='400'>` +
+    `<rect width='640' height='400' fill='hsl(${hue},40%,16%)'/>` +
+    `<text x='24' y='210' fill='white' font-family='sans-serif' font-size='30'>${label}</text></svg>`;
+  return new File([svg], name, { type: 'image/svg+xml' });
+};
+const textFile = (name: string): File => new File(['log contents'], name, { type: 'text/plain' });
+
+const FILES = [
+  imageFile('before', 265, 'screenshot-2026-07-26-17-41-44.png'),
+  imageFile('after', 205, 'canvas-after.png'),
+  textFile('server.log'),
+];
+
+// Plays the composer's role: owns the file set, swaps in a renamed copy on rename.
+const Harness = () => {
+  const [files, setFiles] = useState<File[]>(FILES);
+  return (
+    <AttachmentChips
+      files={files}
+      onRemove={(index) => setFiles((current) => current.filter((_, j) => j !== index))}
+      onRename={(index, name) =>
+        setFiles((current) =>
+          current.map((file, i) => (i === index ? new File([file], name, { type: file.type }) : file))
+        )
+      }
+    />
+  );
+};
+
+/**
+ * Two screenshots + a log. Clicking a screenshot chip opens the lightbox (paging across the two
+ * images); the log stays a plain chip. Proves the preview opens and paints the image.
+ */
+export const WithImages: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders staged chips for two screenshots and a log, where clicking a screenshot chip opens the shared lightbox while the log stays a plain chip.',
+      },
+    },
+  },
+  render: () => <Harness />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('screenshot-2026-07-26-17-41-44.png')).toBeInTheDocument();
+    await expect(canvas.getByText('server.log')).toBeInTheDocument();
+
+    // clicking an image chip opens the shared lightbox (portals to the body)
+    await userEvent.click(canvas.getByText('canvas-after.png'));
+    await waitFor(() => expect(document.querySelector('[role="dialog"]')).not.toBeNull());
+    await waitFor(() =>
+      expect(document.body.querySelector('img[alt="canvas-after.png"]')).not.toBeNull()
+    );
+  },
+};
+
+/**
+ * Renaming from INSIDE the preview: open a chip's lightbox, use its pencil, and the new
+ * name lands on the chip too — the lightbox funnels into the same host `onRename` as the
+ * chip pencil, so both affordances stay one mechanism.
+ */
+export const RenameFromPreview: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the staged chips and renames a screenshot from inside its lightbox — the preview’s pencil commits the new name, and the chip outside carries it too.',
+      },
+    },
+  },
+  render: () => <Harness />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('canvas-after.png'));
+    await waitFor(() => expect(document.querySelector('[role="dialog"]')).not.toBeNull());
+
+    const pencil = await waitFor(() => {
+      const el = document.body.querySelector<HTMLButtonElement>('.imagelightbox-rename');
+      if (!el) {
+        throw new Error('lightbox rename action not rendered');
+      }
+      return el;
+    });
+    await userEvent.click(pencil);
+    const input = await waitFor(() => {
+      const el = document.body.querySelector<HTMLInputElement>('.reqore-modal input');
+      if (!el) {
+        throw new Error('lightbox rename input not shown');
+      }
+      return el;
+    });
+    await userEvent.clear(input);
+    await userEvent.type(input, 'after-fix.png');
+    await userEvent.keyboard('{Enter}');
+
+    // commit ends the edit; a second Esc now closes the modal itself
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => expect(document.querySelector('[role="dialog"]')).toBeNull());
+
+    // the rename reached the host: the CHIP carries the new name
+    await waitFor(() => expect(canvas.getByText('after-fix.png')).toBeInTheDocument());
+    await expect(canvas.queryByText('canvas-after.png')).not.toBeInTheDocument();
+  },
+};
+
+/**
+ * Renaming an auto-named screenshot: the pencil turns the chip into an inline input; Enter
+ * commits and the chip shows the new name. Discriminating — remove the rename wiring and the
+ * chip keeps its `screenshot-<timestamp>.png` name.
+ */
+export const Rename: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the staged chips and renames an auto-named screenshot inline — the pencil opens an input, Enter commits, and the chip shows the new name.',
+      },
+    },
+  },
+  render: () => <Harness />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const chip = canvas.getByText('screenshot-2026-07-26-17-41-44.png').closest('.reqore-tag');
+    if (!chip) {
+      throw new Error('chip not found');
+    }
+    // click the rename pencil (its own action; the ✕ is a separate reqore-tag-remove)
+    const renameAction = chip.querySelector<HTMLElement>('.reqore-tag-action:not(.reqore-tag-remove)');
+    if (!renameAction) {
+      throw new Error('rename action not rendered');
+    }
+    await userEvent.click(renameAction);
+
+    // the inline input appears, pre-filled with the current name
+    const input = await waitFor(() => {
+      const el = canvasElement.querySelector<HTMLInputElement>('input');
+      if (!el) {
+        throw new Error('rename input not shown');
+      }
+      return el;
+    });
+    await userEvent.clear(input);
+    await userEvent.type(input, 'mapper-error.png');
+    await userEvent.keyboard('{Enter}');
+
+    // the chip now carries the new name; the auto-name is gone
+    await waitFor(() => expect(canvas.getByText('mapper-error.png')).toBeInTheDocument());
+    await expect(canvas.queryByText('screenshot-2026-07-26-17-41-44.png')).not.toBeInTheDocument();
+  },
+};