@nordmanai/nif 0.2.4 → 0.2.8

package/registry/ui/components/nm-textarea/nm-textarea.css

@@ -88,43 +88,36 @@
     position: fixed;
     inset: 0;
     z-index: var(--nm-menu-z);
-    background: rgb(var(--nm-canvas-rgb) / 0.6);
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
+    background: rgb(var(--nm-canvas-rgb) / 0.5);
   }
 
-  .nm-textarea-panel {
+  .nm-side-panel.nm-textarea-side-panel {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     z-index: calc(var(--nm-menu-z) + 1);
+    box-sizing: border-box;
     display: flex;
+    flex: none;
     flex-direction: column;
-    width: min(var(--nm-width-dialog), 100%);
-    border-left: var(--nm-rule) solid var(--nm-line-strong);
-    background: var(--nm-panel);
-    color: var(--nm-fg);
-  }
-
-  .nm-textarea-panel__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--nm-space-12) var(--nm-space-16);
-    border-bottom: var(--nm-rule) solid var(--nm-line-strong);
-    gap: var(--nm-space-12);
+    width: var(--nm-side-panel-basis, 50%);
+    border-inline-start: var(--nm-rule) solid var(--nm-divider);
+    background: var(--nm-canvas);
   }
 
-  .nm-textarea-panel__title-group {
+  .nm-textarea-panel__body {
+    flex: 1;
     display: flex;
-    align-items: center;
-    gap: var(--nm-space-12);
-    min-width: 0;
+    flex-direction: column;
+    min-height: 0;
+    padding: var(--nm-space-12);
+    overflow: hidden;
   }
 
   .nm-textarea-panel__title {
     margin: 0;
+    padding-inline-start: var(--nm-space-8);
     font-size: var(--nm-type-ui);
     font-weight: var(--nm-weight-semibold);
     color: var(--nm-fg);
@@ -133,47 +126,6 @@
     text-overflow: ellipsis;
   }
 
-  .nm-textarea-panel__actions {
-    display: flex;
-    align-items: center;
-    gap: var(--nm-space-4);
-  }
-
-  .nm-textarea-panel__action-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--control-h);
-    height: var(--control-h);
-    padding: 0;
-    border: 0;
-    border-radius: var(--nm-control-r);
-    background: transparent;
-    color: var(--nm-fg-muted);
-    cursor: pointer;
-    transition: color 0.15s, background-color 0.15s;
-  }
-
-  .nm-textarea-panel__action-btn:hover {
-    background: var(--nm-raised);
-    color: var(--nm-fg);
-  }
-
-  .nm-textarea-panel__action-btn:focus-visible {
-    outline: var(--nm-rule) solid var(--nm-fg);
-    outline-offset: var(--nm-rule);
-    color: var(--nm-fg);
-  }
-
-  .nm-textarea-panel__body {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    min-height: 0;
-    background: var(--nm-canvas);
-  }
-
   .nm-textarea-panel__editor {
     box-sizing: border-box;
     flex: 1;
@@ -181,7 +133,8 @@
     height: 100%;
     min-height: 100%;
     padding: var(--nm-space-16);
-    border: 0;
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-control-r);
     outline: none;
     resize: none;
     background: var(--nm-raised);
@@ -192,12 +145,20 @@
     line-height: var(--nm-leading-relaxed);
   }
 
+  .nm-textarea-panel__editor:focus-visible {
+    border-color: var(--nm-fg);
+  }
+
   .nm-textarea-panel__preview {
     box-sizing: border-box;
     flex: 1;
+    width: 100%;
+    height: 100%;
     padding: var(--nm-space-16);
     overflow-y: auto;
-    background: var(--nm-canvas);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-control-r);
+    background: var(--nm-raised);
   }
 
   .nm-textarea-panel__empty {
@@ -206,36 +167,3 @@
     font-size: var(--nm-type-ui-sm);
     font-style: italic;
   }
-
-  .nm-textarea-panel__footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--nm-space-8) var(--nm-space-16);
-    border-top: var(--nm-rule) solid var(--nm-line-strong);
-    background: var(--nm-panel);
-    font-size: var(--nm-type-ui-sm);
-    color: var(--nm-fg-subtle);
-  }
-
-  .nm-textarea-panel__done {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--control-h);
-    padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
-    border-radius: var(--nm-control-r);
-    background: var(--nm-raised);
-    color: var(--nm-fg);
-    font-family: var(--nm-font);
-    font-size: var(--nm-type-ui-sm);
-    font-weight: var(--nm-weight-medium);
-    cursor: pointer;
-    transition: background-color 0.15s, border-color 0.15s;
-  }
-
-  .nm-textarea-panel__done:hover {
-    background: var(--nm-panel);
-    border-color: var(--nm-stroke);
-  }

package/registry/ui/components/nm-textarea/nm-textarea.tsx

@@ -2,7 +2,6 @@ import {
   forwardRef,
   useCallback,
   useEffect,
-  useId,
   useRef,
   useState,
   type ChangeEvent,
@@ -13,7 +12,8 @@ import { createPortal } from 'react-dom';
 import { nmClass } from '../../lib/nm-class.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 import { NmProse } from '../nm-prose/nm-prose.tsx';
-import { NmSegmented } from '../nm-segmented/nm-segmented.tsx';
+import { NmSidePanel, NmSidePanelBody } from '../nm-side-panel/nm-side-panel.tsx';
+import { NmToolbar, NmToolbarButton, NmToolbarSpacer } from '../nm-toolbar/nm-toolbar.tsx';
 import { createLogger } from '../../kit-logger.ts';
 
 const logger = createLogger('interface-nm-textarea');
@@ -25,7 +25,7 @@ export type NmTextareaProps = ComponentProps<'textarea'> & {
   openInPanel?: boolean;
   panelTitle?: string;
   panelButtonLabel?: string;
-  panelDefaultTab?: 'code' | 'preview';
+  panelDefaultTab?: 'code' | 'view';
   renderMarkdown?: (markdown: string) => ReactNode;
 };
 
@@ -196,11 +196,6 @@ function parseMarkdown(md: string): ReactNode {
   return nodes;
 }
 
-const PANEL_TABS = [
-  { id: 'code', label: 'Code', icon: 'code' as const },
-  { id: 'preview', label: 'Preview', icon: 'presentation' as const },
-] as const;
-
 export const NmTextarea = forwardRef<HTMLTextAreaElement, NmTextareaProps>(
   function NmTextarea(
     {
@@ -220,7 +215,7 @@ export const NmTextarea = forwardRef<HTMLTextAreaElement, NmTextareaProps>(
   ) {
     const isPanelEnabled = variant === 'panel' || openInPanel;
     const [panelOpen, setPanelOpen] = useState(false);
-    const [tab, setTab] = useState<'code' | 'preview'>(panelDefaultTab);
+    const [view, setView] = useState<'code' | 'view'>(panelDefaultTab);
     const [copied, setCopied] = useState(false);
     const triggerRef = useRef<HTMLButtonElement>(null);
     const internalTextareaRef = useRef<HTMLTextAreaElement | null>(null);
@@ -277,10 +272,6 @@ export const NmTextarea = forwardRef<HTMLTextAreaElement, NmTextareaProps>(
       return () => window.removeEventListener('keydown', onKeyDown);
     }, [panelOpen, handleClose]);
 
-    const titleId = useId();
-    const lineCount = currentValue ? currentValue.split('\n').length : 0;
-    const charCount = currentValue.length;
-
     const textareaElement = (
       <textarea
         className={nmClass('nm-textarea', className)}
@@ -312,52 +303,44 @@ export const NmTextarea = forwardRef<HTMLTextAreaElement, NmTextareaProps>(
             onClick={handleClose}
             aria-hidden="true"
           />
-          <aside
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby={panelTitle ? titleId : undefined}
-            aria-label={panelTitle ? undefined : 'Markdown Editor'}
-            className="nm-textarea-panel"
+          <NmSidePanel
+            label={panelTitle ?? 'Markdown'}
+            open={panelOpen}
+            className="nm-textarea-side-panel"
           >
-            <header className="nm-textarea-panel__header">
-              <div className="nm-textarea-panel__title-group">
-                {panelTitle ? (
-                  <h3 id={titleId} className="nm-textarea-panel__title">
-                    {panelTitle}
-                  </h3>
-                ) : null}
-                <NmSegmented
-                  label="Editor view"
-                  tone="pills"
-                  items={PANEL_TABS}
-                  active={tab}
-                  onSelect={(next) => setTab(next as 'code' | 'preview')}
-                />
-              </div>
-              <div className="nm-textarea-panel__actions">
-                <button
-                  type="button"
-                  className="nm-textarea-panel__action-btn"
-                  aria-label={copied ? 'Copied' : 'Copy markdown'}
-                  title={copied ? 'Copied' : 'Copy markdown'}
-                  onClick={handleCopy}
-                >
-                  <NmIcon id={copied ? 'check' : 'copy'} />
-                </button>
-                <button
-                  type="button"
-                  className="nm-textarea-panel__action-btn"
-                  aria-label="Close panel"
-                  title="Close panel"
-                  onClick={handleClose}
-                >
-                  <NmIcon id="x" />
-                </button>
-              </div>
-            </header>
+            <NmToolbar aria-label={panelTitle ?? 'Markdown'}>
+              {panelTitle ? <span className="nm-textarea-panel__title">{panelTitle}</span> : null}
+              <NmToolbarButton
+                icon="code"
+                label="Code"
+                pressed={view === 'code'}
+                tone={view === 'code' ? 'panel' : 'quiet'}
+                onClick={() => setView('code')}
+              />
+              <NmToolbarButton
+                icon="presentation"
+                label="View"
+                pressed={view === 'view'}
+                tone={view === 'view' ? 'panel' : 'quiet'}
+                onClick={() => setView('view')}
+              />
+              <NmToolbarSpacer />
+              <NmToolbarButton
+                icon={copied ? 'check' : 'copy'}
+                label={copied ? 'Copied' : 'Copy'}
+                tone="quiet"
+                onClick={handleCopy}
+              />
+              <NmToolbarButton
+                icon="x"
+                label="Close"
+                tone="quiet"
+                onClick={handleClose}
+              />
+            </NmToolbar>
 
-            <div className="nm-textarea-panel__body">
-              {tab === 'code' ? (
+            <NmSidePanelBody className="nm-textarea-panel__body">
+              {view === 'code' ? (
                 <textarea
                   className="nm-textarea-panel__editor"
                   value={currentValue}
@@ -367,27 +350,12 @@ export const NmTextarea = forwardRef<HTMLTextAreaElement, NmTextareaProps>(
                   onChange={(e) => handlePanelTextChange(e.target.value)}
                 />
               ) : (
-                <div className="nm-textarea-panel__preview">
-                  <NmProse>
-                    {renderMarkdown ? renderMarkdown(currentValue) : parseMarkdown(currentValue)}
-                  </NmProse>
-                </div>
+                <NmProse className="nm-textarea-panel__preview">
+                  {renderMarkdown ? renderMarkdown(currentValue) : parseMarkdown(currentValue)}
+                </NmProse>
               )}
-            </div>
-
-            <footer className="nm-textarea-panel__footer">
-              <span>
-                {lineCount} {lineCount === 1 ? 'line' : 'lines'} · {charCount} characters
-              </span>
-              <button
-                type="button"
-                className="nm-textarea-panel__done"
-                onClick={handleClose}
-              >
-                Done
-              </button>
-            </footer>
-          </aside>
+            </NmSidePanelBody>
+          </NmSidePanel>
         </>,
         document.body,
       )

package/registry/ui/config/nm-drawer.ts

@@ -0,0 +1,3 @@
+/** The edge a drawer slides in from. */
+export const NM_DRAWER_SIDES = ['left', 'right'] as const;
+export type NmDrawerSide = (typeof NM_DRAWER_SIDES)[number];

package/registry/ui/config/nm-sidebar.ts

@@ -0,0 +1,37 @@
+/** Which edge of the view the sidebar sits on. */
+export const NM_SIDEBAR_SIDES = ['left', 'right'] as const;
+export type NmSidebarSide = (typeof NM_SIDEBAR_SIDES)[number];
+
+/** `sidebar` is flush with the edge. `floating` is a raised card inside a margin. `inset` sits in a margin and the main area is the raised card. */
+export const NM_SIDEBAR_VARIANTS = ['sidebar', 'floating', 'inset'] as const;
+export type NmSidebarVariant = (typeof NM_SIDEBAR_VARIANTS)[number];
+
+/**
+ * How the sidebar collapses.
+ * `offcanvas` slides out of view; the trigger lives in the main area.
+ * `icon` keeps a column of icons, one per row.
+ * `toggle` keeps only the toggle button, in the sidebar's own header.
+ * `none` never collapses.
+ */
+export const NM_SIDEBAR_COLLAPSIBLE = ['offcanvas', 'icon', 'toggle', 'none'] as const;
+export type NmSidebarCollapsible = (typeof NM_SIDEBAR_COLLAPSIBLE)[number];
+
+export const NM_SIDEBAR_STATES = ['expanded', 'collapsed'] as const;
+export type NmSidebarState = (typeof NM_SIDEBAR_STATES)[number];
+
+/** Row heights of a menu button: the small, default and large control heights. */
+export const NM_SIDEBAR_BUTTON_SIZES = ['sm', 'default', 'lg'] as const;
+export type NmSidebarButtonSize = (typeof NM_SIDEBAR_BUTTON_SIZES)[number];
+
+/** `default` is a quiet row that fills on hover. `outline` draws the row's line and raises it. */
+export const NM_SIDEBAR_BUTTON_VARIANTS = ['default', 'outline'] as const;
+export type NmSidebarButtonVariant = (typeof NM_SIDEBAR_BUTTON_VARIANTS)[number];
+
+/** The key that toggles the sidebar with the platform modifier: ⌘B on Mac, Ctrl+B elsewhere. */
+export const NM_SIDEBAR_SHORTCUT = 'b';
+
+/** How long the pointer may be between the toggle and the peeked sidebar before the peek closes, in ms. */
+export const NM_SIDEBAR_PEEK_LEAVE_MS = 200;
+
+/** Below this width the sidebar opens over the page instead of beside it. The same breakpoint as the tokens' phone step. */
+export const NM_SIDEBAR_MOBILE_QUERY = '(max-width: 48rem)';

package/registry/ui/styles/tokens.css

@@ -205,8 +205,17 @@
   --nm-width-tile: 9rem;
   --nm-width-panel-min: 16rem;
   --nm-width-panel-max: 80%;
+  /* The sidebar beside the main area: open, on a phone, and collapsed to icons (a square row inside the group padding). */
+  --nm-width-sidebar: 16rem;
+  --nm-width-sidebar-mobile: 18rem;
+  /* A drawer over the page from an edge. */
+  --nm-width-drawer: 20rem;
+  --nm-width-sidebar-icon: calc(var(--control-h) + var(--nm-space-8) * 2);
   --nm-height-workspace-sm: 20rem;
   --nm-height-workspace-lg: 36rem;
+  /* A sidebar shown inside a page. */
+  --nm-height-sidebar-sm: 26rem;
+  --nm-height-sidebar-lg: 42rem;
   /* Typography. Line height, tracking and weight come from here. The typeface itself is in assets/tokens.css. */
   /* Structural dividers and resize handles. Invisible at Contrast 0, and they appear as Contrast rises. */
   --nm-divider: var(--nm-canvas);
@@ -268,6 +277,7 @@
   --nm-code-gutter: 3ch;
   --nm-width-date: 11rem;
   --nm-width-dialog: 40rem;
+  --nm-width-alert-dialog: 26rem;
   /* A page column, such as a settings page: a share of the view, never narrower or wider than its bounds. */
   --nm-width-column: 90%;
   --nm-width-column-min: 20rem;