@nordmanai/nif 0.2.3 → 0.2.4

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

@@ -47,6 +47,8 @@ export type NmFieldProps = {
     onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
     onFocus?: () => void;
     onBlur?: () => void;
+    openInPanel?: boolean;
+    panelTitle?: string;
 };
 export declare const NmField: import("react").ForwardRefExoticComponent<NmFieldProps & import("react").RefAttributes<HTMLDivElement>>;
 export { NM_FIELD_KINDS, NM_FIELD_LAYOUT };

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

@@ -1,2 +1,12 @@
-import type { ComponentProps } from 'react';
-export declare function NmTextarea({ className, ...props }: ComponentProps<'textarea'>): import("react").JSX.Element;
+import { type ComponentProps, type ReactNode } from 'react';
+export type NmTextareaVariant = 'default' | 'panel';
+export type NmTextareaProps = ComponentProps<'textarea'> & {
+    variant?: NmTextareaVariant;
+    openInPanel?: boolean;
+    panelTitle?: string;
+    panelButtonLabel?: string;
+    panelDefaultTab?: 'code' | 'preview';
+    renderMarkdown?: (markdown: string) => ReactNode;
+};
+export declare const NmTextarea: import("react").ForwardRefExoticComponent<Omit<NmTextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare function NmTextareaPanel(props: NmTextareaProps): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "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.3",
+  "version": "0.2.4",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",
@@ -1766,9 +1766,15 @@
         "components/nm-input/nm-input.tsx",
         "components/nm-popover/nm-popover.css",
         "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-select/nm-select.css",
         "components/nm-select/nm-select.tsx",
         "components/nm-small-icon-button/nm-small-icon-button.tsx",
+        "components/nm-textarea/nm-textarea.css",
+        "components/nm-textarea/nm-textarea.tsx",
         "components/nordman-icon-button/nordman-icon-button.css",
         "components/nordman-icon-button/nordman-icon-button.tsx",
         "config/nm-collection.ts",
@@ -1777,6 +1783,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-segmented.ts",
         "config/nm-small-icon-button.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
@@ -1803,8 +1810,11 @@
         "icon-border",
         "input",
         "popover",
+        "prose",
+        "segmented",
         "select",
         "small-icon-button",
+        "textarea",
         "nordman-icon-button"
       ]
     },
@@ -2953,8 +2963,14 @@
         "components/nm-input/nm-input.tsx",
         "components/nm-popover/nm-popover.css",
         "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-select/nm-select.css",
         "components/nm-select/nm-select.tsx",
+        "components/nm-textarea/nm-textarea.css",
+        "components/nm-textarea/nm-textarea.tsx",
         "components/nordman-icon-button/nordman-icon-button.css",
         "components/nordman-icon-button/nordman-icon-button.tsx",
         "config/nm-dropdown.ts",
@@ -2962,6 +2978,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-segmented.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -2985,7 +3002,10 @@
         "icon",
         "input",
         "popover",
+        "prose",
+        "segmented",
         "select",
+        "textarea",
         "nordman-icon-button"
       ]
     },
@@ -4226,10 +4246,16 @@
         "components/nm-popover/nm-popover.tsx",
         "components/nm-progress/nm-progress.css",
         "components/nm-progress/nm-progress.tsx",
+        "components/nm-prose/nm-prose.css",
+        "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-select/nm-select.css",
         "components/nm-select/nm-select.tsx",
+        "components/nm-textarea/nm-textarea.css",
+        "components/nm-textarea/nm-textarea.tsx",
         "components/nordman-icon-button/nordman-icon-button.css",
         "components/nordman-icon-button/nordman-icon-button.tsx",
         "config/nm-button.ts",
@@ -4239,6 +4265,7 @@
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-questionnaire.ts",
+        "config/nm-segmented.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -4265,7 +4292,10 @@
         "input",
         "popover",
         "progress",
+        "prose",
+        "segmented",
         "select",
+        "textarea",
         "nordman-icon-button"
       ]
     },
@@ -5290,12 +5320,158 @@
     "textarea": {
       "dir": "nm-textarea",
       "files": [
+        "components/nm-icon/animated/activity.tsx",
+        "components/nm-icon/animated/archive.tsx",
+        "components/nm-icon/animated/arrow-down.tsx",
+        "components/nm-icon/animated/arrow-left.tsx",
+        "components/nm-icon/animated/arrow-right.tsx",
+        "components/nm-icon/animated/arrow-up-down.tsx",
+        "components/nm-icon/animated/arrow-up.tsx",
+        "components/nm-icon/animated/audio-lines.tsx",
+        "components/nm-icon/animated/bookmark-plus.tsx",
+        "components/nm-icon/animated/bookmark.tsx",
+        "components/nm-icon/animated/bot.tsx",
+        "components/nm-icon/animated/calendar-days.tsx",
+        "components/nm-icon/animated/calendar.tsx",
+        "components/nm-icon/animated/camera.tsx",
+        "components/nm-icon/animated/chart-column-increasing.tsx",
+        "components/nm-icon/animated/chart-column.tsx",
+        "components/nm-icon/animated/chart-line.tsx",
+        "components/nm-icon/animated/check-check.tsx",
+        "components/nm-icon/animated/check.tsx",
+        "components/nm-icon/animated/chevron-down.tsx",
+        "components/nm-icon/animated/chevron-left.tsx",
+        "components/nm-icon/animated/chevron-right.tsx",
+        "components/nm-icon/animated/chevron-up.tsx",
+        "components/nm-icon/animated/circle-alert.tsx",
+        "components/nm-icon/animated/circle-check-big.tsx",
+        "components/nm-icon/animated/circle-check.tsx",
+        "components/nm-icon/animated/circle-plus.tsx",
+        "components/nm-icon/animated/circle-question-mark.tsx",
+        "components/nm-icon/animated/circle-x.tsx",
+        "components/nm-icon/animated/clock-3.tsx",
+        "components/nm-icon/animated/clock-4.tsx",
+        "components/nm-icon/animated/clock.tsx",
+        "components/nm-icon/animated/cloud-sun.tsx",
+        "components/nm-icon/animated/cloud-upload.tsx",
+        "components/nm-icon/animated/copy.tsx",
+        "components/nm-icon/animated/download.tsx",
+        "components/nm-icon/animated/ellipsis.tsx",
+        "components/nm-icon/animated/external-link.tsx",
+        "components/nm-icon/animated/eye-off.tsx",
+        "components/nm-icon/animated/eye.tsx",
+        "components/nm-icon/animated/fast-forward.tsx",
+        "components/nm-icon/animated/file-clock.tsx",
+        "components/nm-icon/animated/file-text.tsx",
+        "components/nm-icon/animated/file.tsx",
+        "components/nm-icon/animated/folder.tsx",
+        "components/nm-icon/animated/gauge.tsx",
+        "components/nm-icon/animated/globe.tsx",
+        "components/nm-icon/animated/graduation-cap.tsx",
+        "components/nm-icon/animated/headphones.tsx",
+        "components/nm-icon/animated/image.tsx",
+        "components/nm-icon/animated/index.ts",
+        "components/nm-icon/animated/info.tsx",
+        "components/nm-icon/animated/key-round.tsx",
+        "components/nm-icon/animated/layers.tsx",
+        "components/nm-icon/animated/layout-dashboard.tsx",
+        "components/nm-icon/animated/library-big.tsx",
+        "components/nm-icon/animated/lightbulb.tsx",
+        "components/nm-icon/animated/link.tsx",
+        "components/nm-icon/animated/list-filter.tsx",
+        "components/nm-icon/animated/list.tsx",
+        "components/nm-icon/animated/loader-circle.tsx",
+        "components/nm-icon/animated/lock.tsx",
+        "components/nm-icon/animated/log-out.tsx",
+        "components/nm-icon/animated/mail.tsx",
+        "components/nm-icon/animated/map-pin.tsx",
+        "components/nm-icon/animated/menu.tsx",
+        "components/nm-icon/animated/message-circle-dashed.tsx",
+        "components/nm-icon/animated/message-circle.tsx",
+        "components/nm-icon/animated/message-square-plus.tsx",
+        "components/nm-icon/animated/message-square-text.tsx",
+        "components/nm-icon/animated/message-square.tsx",
+        "components/nm-icon/animated/mic-off.tsx",
+        "components/nm-icon/animated/mic.tsx",
+        "components/nm-icon/animated/minimize.tsx",
+        "components/nm-icon/animated/minus.tsx",
+        "components/nm-icon/animated/moon.tsx",
+        "components/nm-icon/animated/music.tsx",
+        "components/nm-icon/animated/notebook-pen.tsx",
+        "components/nm-icon/animated/panel-left.tsx",
+        "components/nm-icon/animated/panel-right.tsx",
+        "components/nm-icon/animated/paperclip.tsx",
+        "components/nm-icon/animated/pause.tsx",
+        "components/nm-icon/animated/pencil.tsx",
+        "components/nm-icon/animated/pin-off.tsx",
+        "components/nm-icon/animated/pin.tsx",
+        "components/nm-icon/animated/plane-takeoff.tsx",
+        "components/nm-icon/animated/play.tsx",
+        "components/nm-icon/animated/plug-zap.tsx",
+        "components/nm-icon/animated/plus.tsx",
+        "components/nm-icon/animated/radio.tsx",
+        "components/nm-icon/animated/refresh-cw.tsx",
+        "components/nm-icon/animated/rocket.tsx",
+        "components/nm-icon/animated/rotate-ccw.tsx",
+        "components/nm-icon/animated/rotate-cw.tsx",
+        "components/nm-icon/animated/save.tsx",
+        "components/nm-icon/animated/search.tsx",
+        "components/nm-icon/animated/send.tsx",
+        "components/nm-icon/animated/settings.tsx",
+        "components/nm-icon/animated/share-2.tsx",
+        "components/nm-icon/animated/share.tsx",
+        "components/nm-icon/animated/shield-check.tsx",
+        "components/nm-icon/animated/shopping-bag.tsx",
+        "components/nm-icon/animated/sliders-horizontal.tsx",
+        "components/nm-icon/animated/sparkles.tsx",
+        "components/nm-icon/animated/star.tsx",
+        "components/nm-icon/animated/sun.tsx",
+        "components/nm-icon/animated/terminal.tsx",
+        "components/nm-icon/animated/trash-2.tsx",
+        "components/nm-icon/animated/trash.tsx",
+        "components/nm-icon/animated/trending-up.tsx",
+        "components/nm-icon/animated/triangle-alert.tsx",
+        "components/nm-icon/animated/trophy.tsx",
+        "components/nm-icon/animated/type.tsx",
+        "components/nm-icon/animated/upload.tsx",
+        "components/nm-icon/animated/user-round.tsx",
+        "components/nm-icon/animated/user.tsx",
+        "components/nm-icon/animated/users-round.tsx",
+        "components/nm-icon/animated/users.tsx",
+        "components/nm-icon/animated/volume-2.tsx",
+        "components/nm-icon/animated/wand-sparkles.tsx",
+        "components/nm-icon/animated/x.tsx",
+        "components/nm-icon/animated/zap.tsx",
+        "components/nm-icon/animated/zoom-in.tsx",
+        "components/nm-icon/animated/zoom-out.tsx",
+        "components/nm-icon/nm-icon.css",
+        "components/nm-icon/nm-icon.tsx",
+        "components/nm-icon/nm-lucide-extended.tsx",
+        "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-textarea/nm-textarea.css",
         "components/nm-textarea/nm-textarea.tsx",
+        "config/nm-icon-button.ts",
+        "config/nm-icons-extended.ts",
+        "config/nm-icons.ts",
+        "config/nm-segmented.ts",
+        "kit-logger.ts",
+        "lib/logger.ts",
         "lib/nm-class.ts"
       ],
-      "libs": [],
-      "uses": []
+      "libs": [
+        "@animate-ui/react",
+        "lucide-react",
+        "motion"
+      ],
+      "uses": [
+        "icon",
+        "prose",
+        "segmented"
+      ]
     },
     "toggle": {
       "dir": "nm-toggle",

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

@@ -28,6 +28,7 @@ import { NmCombobox, NmComboboxContent, NmComboboxEmpty, NmComboboxInput, NmComb
 import { NmSelect, NmSelectContent, NmSelectItem, NmSelectTrigger, NmSelectValue } from '../nm-select/nm-select.tsx';
 import { NmColorSwatch } from '../nm-color-picker/nm-color-picker.tsx';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
+import { NmTextarea } from '../nm-textarea/nm-textarea.tsx';
 
 const logger = createLogger('interface-nm-field');
 
@@ -76,6 +77,8 @@ export type NmFieldProps = {
   onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
   onFocus?: () => void;
   onBlur?: () => void;
+  openInPanel?: boolean;
+  panelTitle?: string;
 };
 
 function OptionSwatches(props: { colors?: readonly string[] }): ReactNode {
@@ -290,7 +293,9 @@ function StackControl(
     );
   } else if (props.kind === NM_FIELD_KINDS.area) {
     editor = (
-      <textarea
+      <NmTextarea
+        variant={props.openInPanel ? 'panel' : 'default'}
+        panelTitle={props.panelTitle ?? props.caption ?? props.label}
         className={NM_FIELD_CLASSES.control}
         id={props.controlId}
         name={props.name}

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

@@ -1,4 +1,3 @@
-
   .nm-textarea {
     box-sizing: border-box;
     display: block;
@@ -40,3 +39,203 @@
   .nm-textarea[aria-invalid='true'] {
     border-color: var(--nm-destructive);
   }
+
+  .nm-textarea-wrap {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+
+  .nm-textarea-wrap .nm-textarea {
+    padding-bottom: calc(var(--control-h) + var(--nm-space-4));
+  }
+
+  .nm-textarea__panel-trigger {
+    position: absolute;
+    right: var(--nm-space-8);
+    bottom: var(--nm-space-8);
+    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-trigger:hover {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+
+  .nm-textarea__panel-trigger:focus-visible {
+    outline: var(--nm-rule) solid var(--nm-fg);
+    outline-offset: var(--nm-rule);
+    color: var(--nm-fg);
+  }
+
+  .nm-textarea__panel-trigger .nm-icon {
+    width: var(--nm-space-16);
+    height: var(--nm-space-16);
+  }
+
+  .nm-textarea-panel__backdrop {
+    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);
+  }
+
+  .nm-textarea-panel {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: calc(var(--nm-menu-z) + 1);
+    display: flex;
+    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);
+  }
+
+  .nm-textarea-panel__title-group {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-12);
+    min-width: 0;
+  }
+
+  .nm-textarea-panel__title {
+    margin: 0;
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-semibold);
+    color: var(--nm-fg);
+    white-space: nowrap;
+    overflow: hidden;
+    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;
+    width: 100%;
+    height: 100%;
+    min-height: 100%;
+    padding: var(--nm-space-16);
+    border: 0;
+    outline: none;
+    resize: none;
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    font-family: var(--nm-font-mono);
+    font-size: var(--control-fs);
+    font-weight: var(--nm-weight-regular);
+    line-height: var(--nm-leading-relaxed);
+  }
+
+  .nm-textarea-panel__preview {
+    box-sizing: border-box;
+    flex: 1;
+    padding: var(--nm-space-16);
+    overflow-y: auto;
+    background: var(--nm-canvas);
+  }
+
+  .nm-textarea-panel__empty {
+    margin: 0;
+    color: var(--nm-fg-subtle);
+    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);
+  }