@fragments-sdk/ui 0.8.0 → 0.8.2

package/src/components/Button/Button.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Button } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Button,
 
   meta: {

package/src/components/ButtonGroup/ButtonGroup.fragment.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { ButtonGroup } from '.';
 import { Button } from '../Button';
 
-export default defineSegment({
+export default defineFragment({
   component: ButtonGroup,
 
   meta: {

package/src/components/Card/Card.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Card } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Card,
 
   meta: {

package/src/components/Chart/Chart.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import {
   LineChart,
   Line,
@@ -40,7 +40,7 @@ const browserData = [
   { name: 'Edge', value: 10, color: 'var(--fui-color-warning)' },
 ];
 
-export default defineSegment({
+export default defineFragment({
   component: ChartContainer,
 
   meta: {

package/src/components/Checkbox/Checkbox.fragment.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Checkbox } from '.';
 
 // Stateful wrapper for interactive demos
@@ -8,7 +8,7 @@ function StatefulCheckbox(props: React.ComponentProps<typeof Checkbox>) {
   return <Checkbox {...props} checked={checked} onCheckedChange={setChecked} />;
 }
 
-export default defineSegment({
+export default defineFragment({
   component: Checkbox,
 
   meta: {

package/src/components/Chip/Chip.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Chip } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Chip,
 
   meta: {

package/src/components/CodeBlock/CodeBlock.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { CodeBlock } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: CodeBlock,
 
   meta: {

package/src/components/CodeBlock/CodeBlock.module.scss

@@ -21,21 +21,16 @@
 }
 
 // ============================================
-// Header bar with filename
+// Header bar (always rendered, contains filename + copy icon)
 // ============================================
-.hasHeader {
-  // Adjust copy button position when header is present
-  .copyButton {
-    top: calc(var(--fui-space-2, $fui-space-2) + 36px); // Account for header height
-  }
-}
-
 .header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   padding: var(--fui-padding-inline-sm) var(--fui-padding-container-md);
   background-color: var(--fui-code-header-bg, $fui-code-header-bg);
   border-bottom: 1px solid var(--fui-code-border, $fui-code-border);
+  min-height: 36px;
 }
 
 .filename {
@@ -45,44 +40,28 @@
   color: var(--fui-code-text, $fui-code-text);
 }
 
-// Copy button - always dark theme styling
+// Copy button - icon-only, always visible in header
 .copyButton {
   @include button-reset;
-  position: absolute;
-  top: var(--fui-space-2, $fui-space-2);
-  right: var(--fui-space-2, $fui-space-2);
-  z-index: 10;
   display: flex;
   align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
-  padding: var(--fui-padding-item-xs) var(--fui-padding-item-sm);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  font-family: var(--fui-font-sans, $fui-font-sans);
-  // Use code-specific tokens for consistent dark theme styling
+  justify-content: center;
+  padding: var(--fui-space-1, $fui-space-1);
   color: var(--fui-code-text-muted, $fui-code-text-muted);
   background: transparent;
   border: none;
   border-radius: var(--fui-radius-md, $fui-radius-md);
-  opacity: 0;
   cursor: pointer;
   transition:
-    opacity var(--fui-transition-fast, $fui-transition-fast),
     background var(--fui-transition-fast, $fui-transition-fast),
     color var(--fui-transition-fast, $fui-transition-fast);
 
-  // Show on wrapper hover
-  .wrapper:hover & {
-    opacity: 1;
-  }
-
   &:hover {
     color: var(--fui-code-tab-text-active, $fui-code-tab-text-active);
     background: var(--fui-code-copy-bg, $fui-code-copy-bg);
   }
 
   &:focus-visible {
-    opacity: 1;
     outline: 2px solid rgba(255, 255, 255, 0.5);
     outline-offset: 2px;
   }
@@ -122,7 +101,7 @@
   pre {
     margin: 0;
     padding: var(--fui-padding-container-md);
-    padding-right: var(--fui-space-10, $fui-space-10);
+    padding-right: var(--fui-padding-container-md);
     background-color: transparent !important;
     border: none !important;
     border-radius: 0 !important;
@@ -146,10 +125,10 @@
 .codeContainer {
   // Shiki output styling - always dark theme
   :global(.shiki) {
+    background-color: transparent !important;
     margin: 0;
     padding: var(--fui-padding-container-md);
-    padding-right: var(--fui-space-10, $fui-space-10);
-    background-color: transparent !important;
+    padding-right: var(--fui-padding-container-md);
     border: none !important;
     border-radius: 0 !important;
     font-family: var(--fui-font-mono, $fui-font-mono);
@@ -257,7 +236,7 @@
   }
 }
 
-// Compact variant — reduced padding, vertically centred copy button
+// Compact variant — reduced padding
 .compact {
   .wrapper {
     border-radius: var(--fui-radius-md, $fui-radius-md);
@@ -266,23 +245,9 @@
   .codeContainer :global(.shiki),
   .loading pre {
     padding: var(--fui-padding-inline-sm) var(--fui-padding-container-sm);
-    padding-right: var(--fui-space-8, $fui-space-8);
     font-size: var(--fui-font-size-sm, $fui-font-size-sm);
     line-height: 1.5;
   }
-
-  .copyButton {
-    top: 50%;
-    transform: translateY(-50%);
-    right: var(--fui-space-1, $fui-space-1);
-    padding: var(--fui-space-1, $fui-space-1);
-    font-size: 0;
-    gap: 0;
-
-    span {
-      display: none;
-    }
-  }
 }
 
 // Word wrap
@@ -343,13 +308,6 @@
   .codeContainer :global(.shiki) {
     font-size: 0.75rem;
     padding: var(--fui-space-2, $fui-space-2);
-    padding-right: var(--fui-space-8, $fui-space-8);
-  }
-
-  .copyButton {
-    opacity: 0.8; // Always visible on mobile (no hover)
-    padding: 0.25rem 0.5rem;
-    font-size: 0.6875rem;
   }
 }
 

package/src/components/CodeBlock/index.tsx

@@ -309,7 +309,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
     {
       code,
       language = 'tsx',
-      theme = 'synthwave-84',
+      theme = 'one-dark-pro',
       showCopy = true,
       title,
       filename,
@@ -421,7 +421,6 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
 
     const wrapperClasses = [
       styles.wrapper,
-      filename && styles.hasHeader,
       persistentCopy && styles.persistentCopyWrapper,
     ].filter(Boolean).join(' ');
 
@@ -433,30 +432,20 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
       <div ref={ref} {...htmlProps} className={classNames}>
         {title && <div className={styles.title}>{title}</div>}
         <div className={wrapperClasses}>
-          {filename && (
+          {(filename || (showCopy && !persistentCopy)) && (
             <div className={styles.header}>
-              <span className={styles.filename}>{filename}</span>
-            </div>
-          )}
-          {showCopy && !persistentCopy && (
-            <button
-              type="button"
-              onClick={handleCopy}
-              className={`${styles.copyButton} ${copied ? styles.copied : ''}`}
-              aria-label={copied ? 'Copied!' : 'Copy code'}
-            >
-              {copied ? (
-                <>
-                  <CheckIcon className={styles.icon} />
-                  <span>Copied!</span>
-                </>
-              ) : (
-                <>
-                  <CopyIcon className={styles.icon} />
-                  <span>Copy</span>
-                </>
+              <span className={styles.filename}>{filename ?? ''}</span>
+              {showCopy && !persistentCopy && (
+                <button
+                  type="button"
+                  onClick={handleCopy}
+                  className={`${styles.copyButton} ${copied ? styles.copied : ''}`}
+                  aria-label={copied ? 'Copied!' : 'Copy code'}
+                >
+                  {copied ? <CheckIcon className={styles.icon} /> : <CopyIcon className={styles.icon} />}
+                </button>
               )}
-            </button>
+            </div>
           )}
           {isLoading ? (
             <div className={styles.loading} style={codeContainerStyle}>

package/src/components/Collapsible/Collapsible.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Collapsible } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Collapsible,
 
   meta: {

package/src/components/ColorPicker/ColorPicker.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { ColorPicker } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: ColorPicker,
 
   meta: {

package/src/components/Combobox/Combobox.fragment.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Combobox } from '.';
 
 // Stateful wrapper for interactive demos
@@ -16,7 +16,7 @@ function StatefulCombobox(props: React.ComponentProps<typeof Combobox> & {
   );
 }
 
-export default defineSegment({
+export default defineFragment({
   component: Combobox,
 
   meta: {

package/src/components/ConversationList/ConversationList.fragment.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { ConversationList } from '.';
 import { Message } from '../Message';
 
-export default defineSegment({
+export default defineFragment({
   component: ConversationList,
 
   meta: {

package/src/components/DatePicker/DatePicker.fragment.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { DatePicker } from '.';
 import type { DateRange } from '.';
 import { subDays } from 'date-fns';
@@ -38,7 +38,7 @@ function StatefulRangePicker(props: {
 
 const today = new Date();
 
-export default defineSegment({
+export default defineFragment({
   component: DatePicker,
 
   meta: {

package/src/components/Dialog/Dialog.fragment.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Dialog } from '.';
 import { Button } from '../Button';
 
-export default defineSegment({
+export default defineFragment({
   component: Dialog,
 
   meta: {

package/src/components/EmptyState/EmptyState.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { EmptyState } from '.';
 import { Button } from '../Button';
 
@@ -54,7 +54,7 @@ const InboxIcon = () => (
   </svg>
 );
 
-export default defineSegment({
+export default defineFragment({
   component: EmptyState,
 
   meta: {

package/src/components/Field/Field.fragment.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Field } from '.';
 import { Input } from '../Input';
 import { Grid } from '../Grid';
 
-export default defineSegment({
+export default defineFragment({
   component: Field,
 
   meta: {

package/src/components/Fieldset/Fieldset.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Fieldset } from '.';
 import { Field } from '../Field';
 import { Input } from '../Input';
@@ -8,7 +8,7 @@ import { Select } from '../Select';
 import { Checkbox } from '../Checkbox';
 import { Grid } from '../Grid';
 
-export default defineSegment({
+export default defineFragment({
   component: Fieldset,
 
   meta: {

package/src/components/Form/Form.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Form } from '.';
 import { Field } from '../Field';
 import { Fieldset } from '../Fieldset';
@@ -12,7 +12,7 @@ import { Toggle } from '../Toggle';
 import { Button } from '../Button';
 import { Grid } from '../Grid';
 
-export default defineSegment({
+export default defineFragment({
   component: Form,
 
   meta: {

package/src/components/Grid/Grid.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Grid } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Grid,
 
   meta: {

package/src/components/Header/Header.fragment.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Header } from '.';
 import { ThemeToggle, ThemeProvider } from '../Theme';
 import { Button } from '../Button';
 import { Input } from '../Input';
 import { MagnifyingGlass } from '@phosphor-icons/react';
 
-export default defineSegment({
+export default defineFragment({
   component: Header,
 
   meta: {

package/src/components/Icon/Icon.fragment.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Icon } from '.';
 import { Heart, Star, Check, Warning, Info } from '@phosphor-icons/react';
 
-export default defineSegment({
+export default defineFragment({
   component: Icon,
 
   meta: {

package/src/components/Image/Image.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Image } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Image,
 
   meta: {

package/src/components/Input/Input.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Input } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Input,
 
   meta: {

package/src/components/Input/Input.test.tsx

@@ -65,6 +65,41 @@ describe('Input', () => {
     expect(handleChange).toHaveBeenCalledWith('a');
   });
 
+  it('focuses the input when shortcut key is pressed', () => {
+    render(<Input aria-label="Search" shortcut="⌘K" />);
+    const input = screen.getByRole('textbox');
+    expect(document.activeElement).not.toBe(input);
+
+    // Simulate pressing ⌘K (Meta+K)
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'k', metaKey: true, bubbles: true })
+    );
+
+    expect(document.activeElement).toBe(input);
+  });
+
+  it('focuses the input when Ctrl+K is pressed (Windows/Linux)', () => {
+    render(<Input aria-label="Search" shortcut="⌘K" />);
+    const input = screen.getByRole('textbox');
+
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'k', ctrlKey: true, bubbles: true })
+    );
+
+    expect(document.activeElement).toBe(input);
+  });
+
+  it('does not focus when wrong key is pressed', () => {
+    render(<Input aria-label="Search" shortcut="⌘K" />);
+    const input = screen.getByRole('textbox');
+
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'j', metaKey: true, bubbles: true })
+    );
+
+    expect(document.activeElement).not.toBe(input);
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = render(<Input label="Accessible input" />);
     await expectNoA11yViolations(container);

package/src/components/Input/index.tsx

@@ -15,7 +15,7 @@ export interface InputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
   error?: boolean;
   label?: string;
   helperText?: string;
-  /** Keyboard shortcut hint displayed inside the input (e.g., "⌘K") */
+  /** Keyboard shortcut hint displayed inside the input (e.g., "⌘K"). Also registers a global keydown listener that focuses the input when the shortcut is pressed. */
   shortcut?: string;
   onChange?: (value: string) => void;
   onBlur?: () => void;
@@ -33,6 +33,20 @@ function mergeAriaIds(...ids: Array<string | undefined>): string | undefined {
   return merged.length > 0 ? merged : undefined;
 }
 
+function parseShortcut(shortcut: string): { meta: boolean; shift: boolean; alt: boolean; key: string } | null {
+  let meta = false, shift = false, alt = false;
+  let remaining = shortcut;
+
+  if (remaining.includes('⌘')) { meta = true; remaining = remaining.replace('⌘', ''); }
+  if (remaining.includes('⇧')) { shift = true; remaining = remaining.replace('⇧', ''); }
+  if (remaining.includes('⌥')) { alt = true; remaining = remaining.replace('⌥', ''); }
+
+  remaining = remaining.trim();
+  if (!remaining) return null;
+
+  return { meta, shift, alt, key: remaining };
+}
+
 const InputRoot = React.forwardRef<HTMLInputElement, InputProps>(
   function Input(
     {
@@ -66,6 +80,37 @@ const InputRoot = React.forwardRef<HTMLInputElement, InputProps>(
     const generatedId = React.useId();
     const helperId = helperText ? `input-helper-${generatedId}` : undefined;
 
+    const internalRef = React.useRef<HTMLInputElement>(null);
+    const mergedRef = React.useCallback(
+      (node: HTMLInputElement | null) => {
+        internalRef.current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;
+        }
+      },
+      [ref]
+    );
+
+    // Register global keydown handler when shortcut is provided
+    React.useEffect(() => {
+      if (!shortcut) return;
+      const parsed = parseShortcut(shortcut);
+      if (!parsed) return;
+
+      const handler = (e: KeyboardEvent) => {
+        if (parsed.meta && !(e.metaKey || e.ctrlKey)) return;
+        if (parsed.shift && !e.shiftKey) return;
+        if (parsed.alt && !e.altKey) return;
+        if (e.key.toLowerCase() !== parsed.key.toLowerCase()) return;
+        e.preventDefault();
+        internalRef.current?.focus();
+      };
+      document.addEventListener('keydown', handler);
+      return () => document.removeEventListener('keydown', handler);
+    }, [shortcut]);
+
     const inputClasses = [
       styles.input,
       styles[size],
@@ -85,7 +130,7 @@ const InputRoot = React.forwardRef<HTMLInputElement, InputProps>(
 
     const inputElement = (
       <Field.Control
-        ref={ref}
+        ref={mergedRef}
         type={type}
         value={value}
         defaultValue={defaultValue}

package/src/components/Link/Link.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Link } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Link,
 
   meta: {

package/src/components/List/List.fragment.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { List } from '.';
 import { Check } from '@phosphor-icons/react';
 
-export default defineSegment({
+export default defineFragment({
   component: List,
 
   meta: {

package/src/components/Listbox/Listbox.fragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Listbox } from '.';
 
-export default defineSegment({
+export default defineFragment({
   component: Listbox,
 
   meta: {