@nordmanai/nif 0.2.4 → 0.2.5

package/dist/ui/components/nm-textarea/nm-textarea.d.ts

@@ -5,7 +5,7 @@ export type NmTextareaProps = ComponentProps<'textarea'> & {
     openInPanel?: boolean;
     panelTitle?: string;
     panelButtonLabel?: string;
-    panelDefaultTab?: 'code' | 'preview';
+    panelDefaultTab?: 'code' | 'view';
     renderMarkdown?: (markdown: string) => ReactNode;
 };
 export declare const NmTextarea: import("react").ForwardRefExoticComponent<Omit<NmTextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Nordman Interface Framework: the one UI and UX system for every Nordman product. Base UI, in the shadcn composition, styled by NIF tokens.",
   "type": "module",
   "sideEffects": [

package/registry/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.4",
+  "version": "0.2.5",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",
@@ -1768,22 +1768,27 @@
         "components/nm-popover/nm-popover.tsx",
         "components/nm-prose/nm-prose.css",
         "components/nm-prose/nm-prose.tsx",
-        "components/nm-segmented/nm-segmented.css",
-        "components/nm-segmented/nm-segmented.tsx",
+        "components/nm-resize-handle/nm-resize-handle.css",
+        "components/nm-resize-handle/nm-resize-handle.tsx",
         "components/nm-select/nm-select.css",
         "components/nm-select/nm-select.tsx",
+        "components/nm-side-panel/nm-side-panel.css",
+        "components/nm-side-panel/nm-side-panel.tsx",
         "components/nm-small-icon-button/nm-small-icon-button.tsx",
         "components/nm-textarea/nm-textarea.css",
         "components/nm-textarea/nm-textarea.tsx",
+        "components/nm-toolbar/nm-toolbar.css",
+        "components/nm-toolbar/nm-toolbar.tsx",
         "components/nordman-icon-button/nordman-icon-button.css",
         "components/nordman-icon-button/nordman-icon-button.tsx",
+        "config/nm-button.ts",
         "config/nm-collection.ts",
         "config/nm-dropdown.ts",
         "config/nm-field.ts",
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
-        "config/nm-segmented.ts",
+        "config/nm-side-panel.ts",
         "config/nm-small-icon-button.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
@@ -1811,10 +1816,12 @@
         "input",
         "popover",
         "prose",
-        "segmented",
+        "resize-handle",
         "select",
+        "side-panel",
         "small-icon-button",
         "textarea",
+        "toolbar",
         "nordman-icon-button"
       ]
     },
@@ -2965,20 +2972,25 @@
         "components/nm-popover/nm-popover.tsx",
         "components/nm-prose/nm-prose.css",
         "components/nm-prose/nm-prose.tsx",
-        "components/nm-segmented/nm-segmented.css",
-        "components/nm-segmented/nm-segmented.tsx",
+        "components/nm-resize-handle/nm-resize-handle.css",
+        "components/nm-resize-handle/nm-resize-handle.tsx",
         "components/nm-select/nm-select.css",
         "components/nm-select/nm-select.tsx",
+        "components/nm-side-panel/nm-side-panel.css",
+        "components/nm-side-panel/nm-side-panel.tsx",
         "components/nm-textarea/nm-textarea.css",
         "components/nm-textarea/nm-textarea.tsx",
+        "components/nm-toolbar/nm-toolbar.css",
+        "components/nm-toolbar/nm-toolbar.tsx",
         "components/nordman-icon-button/nordman-icon-button.css",
         "components/nordman-icon-button/nordman-icon-button.tsx",
+        "config/nm-button.ts",
         "config/nm-dropdown.ts",
         "config/nm-field.ts",
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
-        "config/nm-segmented.ts",
+        "config/nm-side-panel.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -3003,9 +3015,11 @@
         "input",
         "popover",
         "prose",
-        "segmented",
+        "resize-handle",
         "select",
+        "side-panel",
         "textarea",
+        "toolbar",
         "nordman-icon-button"
       ]
     },
@@ -4250,12 +4264,16 @@
         "components/nm-prose/nm-prose.tsx",
         "components/nm-questionnaire/nm-questionnaire.css",
         "components/nm-questionnaire/nm-questionnaire.tsx",
-        "components/nm-segmented/nm-segmented.css",
-        "components/nm-segmented/nm-segmented.tsx",
+        "components/nm-resize-handle/nm-resize-handle.css",
+        "components/nm-resize-handle/nm-resize-handle.tsx",
         "components/nm-select/nm-select.css",
         "components/nm-select/nm-select.tsx",
+        "components/nm-side-panel/nm-side-panel.css",
+        "components/nm-side-panel/nm-side-panel.tsx",
         "components/nm-textarea/nm-textarea.css",
         "components/nm-textarea/nm-textarea.tsx",
+        "components/nm-toolbar/nm-toolbar.css",
+        "components/nm-toolbar/nm-toolbar.tsx",
         "components/nordman-icon-button/nordman-icon-button.css",
         "components/nordman-icon-button/nordman-icon-button.tsx",
         "config/nm-button.ts",
@@ -4265,7 +4283,7 @@
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-questionnaire.ts",
-        "config/nm-segmented.ts",
+        "config/nm-side-panel.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -4293,9 +4311,11 @@
         "popover",
         "progress",
         "prose",
-        "segmented",
+        "resize-handle",
         "select",
+        "side-panel",
         "textarea",
+        "toolbar",
         "nordman-icon-button"
       ]
     },
@@ -5450,27 +5470,36 @@
         "components/nm-icon/nm-lucide.tsx",
         "components/nm-prose/nm-prose.css",
         "components/nm-prose/nm-prose.tsx",
-        "components/nm-segmented/nm-segmented.css",
-        "components/nm-segmented/nm-segmented.tsx",
+        "components/nm-resize-handle/nm-resize-handle.css",
+        "components/nm-resize-handle/nm-resize-handle.tsx",
+        "components/nm-side-panel/nm-side-panel.css",
+        "components/nm-side-panel/nm-side-panel.tsx",
         "components/nm-textarea/nm-textarea.css",
         "components/nm-textarea/nm-textarea.tsx",
+        "components/nm-toolbar/nm-toolbar.css",
+        "components/nm-toolbar/nm-toolbar.tsx",
+        "config/nm-button.ts",
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
-        "config/nm-segmented.ts",
+        "config/nm-side-panel.ts",
         "kit-logger.ts",
         "lib/logger.ts",
-        "lib/nm-class.ts"
+        "lib/nm-class.ts",
+        "lib/nm-motion.ts"
       ],
       "libs": [
         "@animate-ui/react",
+        "@base-ui/react",
         "lucide-react",
         "motion"
       ],
       "uses": [
         "icon",
         "prose",
-        "segmented"
+        "resize-handle",
+        "side-panel",
+        "toolbar"
       ]
     },
     "toggle": {

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,
       )