@nordmanai/nif 0.2.3 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.js +6799 -6602
  2. package/dist/styles.css +1 -1
  3. package/dist/ui/components/nm-field/nm-field.d.ts +2 -0
  4. package/dist/ui/components/nm-textarea/nm-textarea.d.ts +12 -2
  5. package/package.json +1 -1
  6. package/registry/index.json +209 -4
  7. package/registry/ui/components/nm-field/nm-field.tsx +6 -1
  8. package/registry/ui/components/nm-textarea/nm-textarea.css +128 -1
  9. package/registry/ui/components/nm-textarea/nm-textarea.tsx +385 -3
package/dist/ui/components/nm-field/nm-field.d.ts CHANGED
@@ -47,6 +47,8 @@ export type NmFieldProps = {
47
47
  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
48
48
  onFocus?: () => void;
49
49
  onBlur?: () => void;
50
+ openInPanel?: boolean;
51
+ panelTitle?: string;
50
52
  };
51
53
  export declare const NmField: import("react").ForwardRefExoticComponent<NmFieldProps & import("react").RefAttributes<HTMLDivElement>>;
52
54
  export { NM_FIELD_KINDS, NM_FIELD_LAYOUT };
package/dist/ui/components/nm-textarea/nm-textarea.d.ts CHANGED
@@ -1,2 +1,12 @@
1
- import type { ComponentProps } from 'react';
2
- export declare function NmTextarea({ className, ...props }: ComponentProps<'textarea'>): import("react").JSX.Element;
1
+ import { type ComponentProps, type ReactNode } from 'react';
2
+ export type NmTextareaVariant = 'default' | 'panel';
3
+ export type NmTextareaProps = ComponentProps<'textarea'> & {
4
+ variant?: NmTextareaVariant;
5
+ openInPanel?: boolean;
6
+ panelTitle?: string;
7
+ panelButtonLabel?: string;
8
+ panelDefaultTab?: 'code' | 'view';
9
+ renderMarkdown?: (markdown: string) => ReactNode;
10
+ };
11
+ export declare const NmTextarea: import("react").ForwardRefExoticComponent<Omit<NmTextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
12
+ export declare function NmTextareaPanel(props: NmTextareaProps): import("react").JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nordmanai/nif",
3
- "version": "0.2.3",
3
+ "version": "0.2.5",
4
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.",
5
5
  "type": "module",
6
6
  "sideEffects": [
package/registry/index.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.2.3",
2
+ "version": "0.2.5",
3
3
  "versions": {
4
4
  "@animate-ui/react": "^2.4.2",
5
5
  "@base-ui/react": "^1.9.0",
@@ -1766,17 +1766,29 @@
1766
1766
  "components/nm-input/nm-input.tsx",
1767
1767
  "components/nm-popover/nm-popover.css",
1768
1768
  "components/nm-popover/nm-popover.tsx",
1769
+ "components/nm-prose/nm-prose.css",
1770
+ "components/nm-prose/nm-prose.tsx",
1771
+ "components/nm-resize-handle/nm-resize-handle.css",
1772
+ "components/nm-resize-handle/nm-resize-handle.tsx",
1769
1773
  "components/nm-select/nm-select.css",
1770
1774
  "components/nm-select/nm-select.tsx",
1775
+ "components/nm-side-panel/nm-side-panel.css",
1776
+ "components/nm-side-panel/nm-side-panel.tsx",
1771
1777
  "components/nm-small-icon-button/nm-small-icon-button.tsx",
1778
+ "components/nm-textarea/nm-textarea.css",
1779
+ "components/nm-textarea/nm-textarea.tsx",
1780
+ "components/nm-toolbar/nm-toolbar.css",
1781
+ "components/nm-toolbar/nm-toolbar.tsx",
1772
1782
  "components/nordman-icon-button/nordman-icon-button.css",
1773
1783
  "components/nordman-icon-button/nordman-icon-button.tsx",
1784
+ "config/nm-button.ts",
1774
1785
  "config/nm-collection.ts",
1775
1786
  "config/nm-dropdown.ts",
1776
1787
  "config/nm-field.ts",
1777
1788
  "config/nm-icon-button.ts",
1778
1789
  "config/nm-icons-extended.ts",
1779
1790
  "config/nm-icons.ts",
1791
+ "config/nm-side-panel.ts",
1780
1792
  "config/nm-small-icon-button.ts",
1781
1793
  "config/nordman-chrome.ts",
1782
1794
  "kit-logger.ts",
@@ -1803,8 +1815,13 @@
1803
1815
  "icon-border",
1804
1816
  "input",
1805
1817
  "popover",
1818
+ "prose",
1819
+ "resize-handle",
1806
1820
  "select",
1821
+ "side-panel",
1807
1822
  "small-icon-button",
1823
+ "textarea",
1824
+ "toolbar",
1808
1825
  "nordman-icon-button"
1809
1826
  ]
1810
1827
  },
@@ -2953,15 +2970,27 @@
2953
2970
  "components/nm-input/nm-input.tsx",
2954
2971
  "components/nm-popover/nm-popover.css",
2955
2972
  "components/nm-popover/nm-popover.tsx",
2973
+ "components/nm-prose/nm-prose.css",
2974
+ "components/nm-prose/nm-prose.tsx",
2975
+ "components/nm-resize-handle/nm-resize-handle.css",
2976
+ "components/nm-resize-handle/nm-resize-handle.tsx",
2956
2977
  "components/nm-select/nm-select.css",
2957
2978
  "components/nm-select/nm-select.tsx",
2979
+ "components/nm-side-panel/nm-side-panel.css",
2980
+ "components/nm-side-panel/nm-side-panel.tsx",
2981
+ "components/nm-textarea/nm-textarea.css",
2982
+ "components/nm-textarea/nm-textarea.tsx",
2983
+ "components/nm-toolbar/nm-toolbar.css",
2984
+ "components/nm-toolbar/nm-toolbar.tsx",
2958
2985
  "components/nordman-icon-button/nordman-icon-button.css",
2959
2986
  "components/nordman-icon-button/nordman-icon-button.tsx",
2987
+ "config/nm-button.ts",
2960
2988
  "config/nm-dropdown.ts",
2961
2989
  "config/nm-field.ts",
2962
2990
  "config/nm-icon-button.ts",
2963
2991
  "config/nm-icons-extended.ts",
2964
2992
  "config/nm-icons.ts",
2993
+ "config/nm-side-panel.ts",
2965
2994
  "config/nordman-chrome.ts",
2966
2995
  "kit-logger.ts",
2967
2996
  "lib/logger.ts",
@@ -2985,7 +3014,12 @@
2985
3014
  "icon",
2986
3015
  "input",
2987
3016
  "popover",
3017
+ "prose",
3018
+ "resize-handle",
2988
3019
  "select",
3020
+ "side-panel",
3021
+ "textarea",
3022
+ "toolbar",
2989
3023
  "nordman-icon-button"
2990
3024
  ]
2991
3025
  },
@@ -4226,10 +4260,20 @@
4226
4260
  "components/nm-popover/nm-popover.tsx",
4227
4261
  "components/nm-progress/nm-progress.css",
4228
4262
  "components/nm-progress/nm-progress.tsx",
4263
+ "components/nm-prose/nm-prose.css",
4264
+ "components/nm-prose/nm-prose.tsx",
4229
4265
  "components/nm-questionnaire/nm-questionnaire.css",
4230
4266
  "components/nm-questionnaire/nm-questionnaire.tsx",
4267
+ "components/nm-resize-handle/nm-resize-handle.css",
4268
+ "components/nm-resize-handle/nm-resize-handle.tsx",
4231
4269
  "components/nm-select/nm-select.css",
4232
4270
  "components/nm-select/nm-select.tsx",
4271
+ "components/nm-side-panel/nm-side-panel.css",
4272
+ "components/nm-side-panel/nm-side-panel.tsx",
4273
+ "components/nm-textarea/nm-textarea.css",
4274
+ "components/nm-textarea/nm-textarea.tsx",
4275
+ "components/nm-toolbar/nm-toolbar.css",
4276
+ "components/nm-toolbar/nm-toolbar.tsx",
4233
4277
  "components/nordman-icon-button/nordman-icon-button.css",
4234
4278
  "components/nordman-icon-button/nordman-icon-button.tsx",
4235
4279
  "config/nm-button.ts",
@@ -4239,6 +4283,7 @@
4239
4283
  "config/nm-icons-extended.ts",
4240
4284
  "config/nm-icons.ts",
4241
4285
  "config/nm-questionnaire.ts",
4286
+ "config/nm-side-panel.ts",
4242
4287
  "config/nordman-chrome.ts",
4243
4288
  "kit-logger.ts",
4244
4289
  "lib/logger.ts",
@@ -4265,7 +4310,12 @@
4265
4310
  "input",
4266
4311
  "popover",
4267
4312
  "progress",
4313
+ "prose",
4314
+ "resize-handle",
4268
4315
  "select",
4316
+ "side-panel",
4317
+ "textarea",
4318
+ "toolbar",
4269
4319
  "nordman-icon-button"
4270
4320
  ]
4271
4321
  },
@@ -5290,12 +5340,167 @@
5290
5340
  "textarea": {
5291
5341
  "dir": "nm-textarea",
5292
5342
  "files": [
5343
+ "components/nm-icon/animated/activity.tsx",
5344
+ "components/nm-icon/animated/archive.tsx",
5345
+ "components/nm-icon/animated/arrow-down.tsx",
5346
+ "components/nm-icon/animated/arrow-left.tsx",
5347
+ "components/nm-icon/animated/arrow-right.tsx",
5348
+ "components/nm-icon/animated/arrow-up-down.tsx",
5349
+ "components/nm-icon/animated/arrow-up.tsx",
5350
+ "components/nm-icon/animated/audio-lines.tsx",
5351
+ "components/nm-icon/animated/bookmark-plus.tsx",
5352
+ "components/nm-icon/animated/bookmark.tsx",
5353
+ "components/nm-icon/animated/bot.tsx",
5354
+ "components/nm-icon/animated/calendar-days.tsx",
5355
+ "components/nm-icon/animated/calendar.tsx",
5356
+ "components/nm-icon/animated/camera.tsx",
5357
+ "components/nm-icon/animated/chart-column-increasing.tsx",
5358
+ "components/nm-icon/animated/chart-column.tsx",
5359
+ "components/nm-icon/animated/chart-line.tsx",
5360
+ "components/nm-icon/animated/check-check.tsx",
5361
+ "components/nm-icon/animated/check.tsx",
5362
+ "components/nm-icon/animated/chevron-down.tsx",
5363
+ "components/nm-icon/animated/chevron-left.tsx",
5364
+ "components/nm-icon/animated/chevron-right.tsx",
5365
+ "components/nm-icon/animated/chevron-up.tsx",
5366
+ "components/nm-icon/animated/circle-alert.tsx",
5367
+ "components/nm-icon/animated/circle-check-big.tsx",
5368
+ "components/nm-icon/animated/circle-check.tsx",
5369
+ "components/nm-icon/animated/circle-plus.tsx",
5370
+ "components/nm-icon/animated/circle-question-mark.tsx",
5371
+ "components/nm-icon/animated/circle-x.tsx",
5372
+ "components/nm-icon/animated/clock-3.tsx",
5373
+ "components/nm-icon/animated/clock-4.tsx",
5374
+ "components/nm-icon/animated/clock.tsx",
5375
+ "components/nm-icon/animated/cloud-sun.tsx",
5376
+ "components/nm-icon/animated/cloud-upload.tsx",
5377
+ "components/nm-icon/animated/copy.tsx",
5378
+ "components/nm-icon/animated/download.tsx",
5379
+ "components/nm-icon/animated/ellipsis.tsx",
5380
+ "components/nm-icon/animated/external-link.tsx",
5381
+ "components/nm-icon/animated/eye-off.tsx",
5382
+ "components/nm-icon/animated/eye.tsx",
5383
+ "components/nm-icon/animated/fast-forward.tsx",
5384
+ "components/nm-icon/animated/file-clock.tsx",
5385
+ "components/nm-icon/animated/file-text.tsx",
5386
+ "components/nm-icon/animated/file.tsx",
5387
+ "components/nm-icon/animated/folder.tsx",
5388
+ "components/nm-icon/animated/gauge.tsx",
5389
+ "components/nm-icon/animated/globe.tsx",
5390
+ "components/nm-icon/animated/graduation-cap.tsx",
5391
+ "components/nm-icon/animated/headphones.tsx",
5392
+ "components/nm-icon/animated/image.tsx",
5393
+ "components/nm-icon/animated/index.ts",
5394
+ "components/nm-icon/animated/info.tsx",
5395
+ "components/nm-icon/animated/key-round.tsx",
5396
+ "components/nm-icon/animated/layers.tsx",
5397
+ "components/nm-icon/animated/layout-dashboard.tsx",
5398
+ "components/nm-icon/animated/library-big.tsx",
5399
+ "components/nm-icon/animated/lightbulb.tsx",
5400
+ "components/nm-icon/animated/link.tsx",
5401
+ "components/nm-icon/animated/list-filter.tsx",
5402
+ "components/nm-icon/animated/list.tsx",
5403
+ "components/nm-icon/animated/loader-circle.tsx",
5404
+ "components/nm-icon/animated/lock.tsx",
5405
+ "components/nm-icon/animated/log-out.tsx",
5406
+ "components/nm-icon/animated/mail.tsx",
5407
+ "components/nm-icon/animated/map-pin.tsx",
5408
+ "components/nm-icon/animated/menu.tsx",
5409
+ "components/nm-icon/animated/message-circle-dashed.tsx",
5410
+ "components/nm-icon/animated/message-circle.tsx",
5411
+ "components/nm-icon/animated/message-square-plus.tsx",
5412
+ "components/nm-icon/animated/message-square-text.tsx",
5413
+ "components/nm-icon/animated/message-square.tsx",
5414
+ "components/nm-icon/animated/mic-off.tsx",
5415
+ "components/nm-icon/animated/mic.tsx",
5416
+ "components/nm-icon/animated/minimize.tsx",
5417
+ "components/nm-icon/animated/minus.tsx",
5418
+ "components/nm-icon/animated/moon.tsx",
5419
+ "components/nm-icon/animated/music.tsx",
5420
+ "components/nm-icon/animated/notebook-pen.tsx",
5421
+ "components/nm-icon/animated/panel-left.tsx",
5422
+ "components/nm-icon/animated/panel-right.tsx",
5423
+ "components/nm-icon/animated/paperclip.tsx",
5424
+ "components/nm-icon/animated/pause.tsx",
5425
+ "components/nm-icon/animated/pencil.tsx",
5426
+ "components/nm-icon/animated/pin-off.tsx",
5427
+ "components/nm-icon/animated/pin.tsx",
5428
+ "components/nm-icon/animated/plane-takeoff.tsx",
5429
+ "components/nm-icon/animated/play.tsx",
5430
+ "components/nm-icon/animated/plug-zap.tsx",
5431
+ "components/nm-icon/animated/plus.tsx",
5432
+ "components/nm-icon/animated/radio.tsx",
5433
+ "components/nm-icon/animated/refresh-cw.tsx",
5434
+ "components/nm-icon/animated/rocket.tsx",
5435
+ "components/nm-icon/animated/rotate-ccw.tsx",
5436
+ "components/nm-icon/animated/rotate-cw.tsx",
5437
+ "components/nm-icon/animated/save.tsx",
5438
+ "components/nm-icon/animated/search.tsx",
5439
+ "components/nm-icon/animated/send.tsx",
5440
+ "components/nm-icon/animated/settings.tsx",
5441
+ "components/nm-icon/animated/share-2.tsx",
5442
+ "components/nm-icon/animated/share.tsx",
5443
+ "components/nm-icon/animated/shield-check.tsx",
5444
+ "components/nm-icon/animated/shopping-bag.tsx",
5445
+ "components/nm-icon/animated/sliders-horizontal.tsx",
5446
+ "components/nm-icon/animated/sparkles.tsx",
5447
+ "components/nm-icon/animated/star.tsx",
5448
+ "components/nm-icon/animated/sun.tsx",
5449
+ "components/nm-icon/animated/terminal.tsx",
5450
+ "components/nm-icon/animated/trash-2.tsx",
5451
+ "components/nm-icon/animated/trash.tsx",
5452
+ "components/nm-icon/animated/trending-up.tsx",
5453
+ "components/nm-icon/animated/triangle-alert.tsx",
5454
+ "components/nm-icon/animated/trophy.tsx",
5455
+ "components/nm-icon/animated/type.tsx",
5456
+ "components/nm-icon/animated/upload.tsx",
5457
+ "components/nm-icon/animated/user-round.tsx",
5458
+ "components/nm-icon/animated/user.tsx",
5459
+ "components/nm-icon/animated/users-round.tsx",
5460
+ "components/nm-icon/animated/users.tsx",
5461
+ "components/nm-icon/animated/volume-2.tsx",
5462
+ "components/nm-icon/animated/wand-sparkles.tsx",
5463
+ "components/nm-icon/animated/x.tsx",
5464
+ "components/nm-icon/animated/zap.tsx",
5465
+ "components/nm-icon/animated/zoom-in.tsx",
5466
+ "components/nm-icon/animated/zoom-out.tsx",
5467
+ "components/nm-icon/nm-icon.css",
5468
+ "components/nm-icon/nm-icon.tsx",
5469
+ "components/nm-icon/nm-lucide-extended.tsx",
5470
+ "components/nm-icon/nm-lucide.tsx",
5471
+ "components/nm-prose/nm-prose.css",
5472
+ "components/nm-prose/nm-prose.tsx",
5473
+ "components/nm-resize-handle/nm-resize-handle.css",
5474
+ "components/nm-resize-handle/nm-resize-handle.tsx",
5475
+ "components/nm-side-panel/nm-side-panel.css",
5476
+ "components/nm-side-panel/nm-side-panel.tsx",
5293
5477
  "components/nm-textarea/nm-textarea.css",
5294
5478
  "components/nm-textarea/nm-textarea.tsx",
5295
- "lib/nm-class.ts"
5479
+ "components/nm-toolbar/nm-toolbar.css",
5480
+ "components/nm-toolbar/nm-toolbar.tsx",
5481
+ "config/nm-button.ts",
5482
+ "config/nm-icon-button.ts",
5483
+ "config/nm-icons-extended.ts",
5484
+ "config/nm-icons.ts",
5485
+ "config/nm-side-panel.ts",
5486
+ "kit-logger.ts",
5487
+ "lib/logger.ts",
5488
+ "lib/nm-class.ts",
5489
+ "lib/nm-motion.ts"
5296
5490
  ],
5297
- "libs": [],
5298
- "uses": []
5491
+ "libs": [
5492
+ "@animate-ui/react",
5493
+ "@base-ui/react",
5494
+ "lucide-react",
5495
+ "motion"
5496
+ ],
5497
+ "uses": [
5498
+ "icon",
5499
+ "prose",
5500
+ "resize-handle",
5501
+ "side-panel",
5502
+ "toolbar"
5503
+ ]
5299
5504
  },
5300
5505
  "toggle": {
5301
5506
  "dir": "nm-toggle",
package/registry/ui/components/nm-field/nm-field.tsx CHANGED
@@ -28,6 +28,7 @@ import { NmCombobox, NmComboboxContent, NmComboboxEmpty, NmComboboxInput, NmComb
28
28
  import { NmSelect, NmSelectContent, NmSelectItem, NmSelectTrigger, NmSelectValue } from '../nm-select/nm-select.tsx';
29
29
  import { NmColorSwatch } from '../nm-color-picker/nm-color-picker.tsx';
30
30
  import { NmIcon } from '../nm-icon/nm-icon.tsx';
31
+ import { NmTextarea } from '../nm-textarea/nm-textarea.tsx';
31
32
 
32
33
  const logger = createLogger('interface-nm-field');
33
34
 
@@ -76,6 +77,8 @@ export type NmFieldProps = {
76
77
  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
77
78
  onFocus?: () => void;
78
79
  onBlur?: () => void;
80
+ openInPanel?: boolean;
81
+ panelTitle?: string;
79
82
  };
80
83
 
81
84
  function OptionSwatches(props: { colors?: readonly string[] }): ReactNode {
@@ -290,7 +293,9 @@ function StackControl(
290
293
  );
291
294
  } else if (props.kind === NM_FIELD_KINDS.area) {
292
295
  editor = (
293
- <textarea
296
+ <NmTextarea
297
+ variant={props.openInPanel ? 'panel' : 'default'}
298
+ panelTitle={props.panelTitle ?? props.caption ?? props.label}
294
299
  className={NM_FIELD_CLASSES.control}
295
300
  id={props.controlId}
296
301
  name={props.name}
package/registry/ui/components/nm-textarea/nm-textarea.css CHANGED
@@ -1,4 +1,3 @@
1
-
2
1
  .nm-textarea {
3
2
  box-sizing: border-box;
4
3
  display: block;
@@ -40,3 +39,131 @@
40
39
  .nm-textarea[aria-invalid='true'] {
41
40
  border-color: var(--nm-destructive);
42
41
  }
42
+
43
+ .nm-textarea-wrap {
44
+ position: relative;
45
+ display: block;
46
+ width: 100%;
47
+ }
48
+
49
+ .nm-textarea-wrap .nm-textarea {
50
+ padding-bottom: calc(var(--control-h) + var(--nm-space-4));
51
+ }
52
+
53
+ .nm-textarea__panel-trigger {
54
+ position: absolute;
55
+ right: var(--nm-space-8);
56
+ bottom: var(--nm-space-8);
57
+ display: inline-flex;
58
+ align-items: center;
59
+ justify-content: center;
60
+ width: var(--control-h);
61
+ height: var(--control-h);
62
+ padding: 0;
63
+ border: 0;
64
+ border-radius: var(--nm-control-r);
65
+ background: transparent;
66
+ color: var(--nm-fg-muted);
67
+ cursor: pointer;
68
+ transition: color 0.15s, background-color 0.15s;
69
+ }
70
+
71
+ .nm-textarea__panel-trigger:hover {
72
+ background: var(--nm-panel);
73
+ color: var(--nm-fg);
74
+ }
75
+
76
+ .nm-textarea__panel-trigger:focus-visible {
77
+ outline: var(--nm-rule) solid var(--nm-fg);
78
+ outline-offset: var(--nm-rule);
79
+ color: var(--nm-fg);
80
+ }
81
+
82
+ .nm-textarea__panel-trigger .nm-icon {
83
+ width: var(--nm-space-16);
84
+ height: var(--nm-space-16);
85
+ }
86
+
87
+ .nm-textarea-panel__backdrop {
88
+ position: fixed;
89
+ inset: 0;
90
+ z-index: var(--nm-menu-z);
91
+ background: rgb(var(--nm-canvas-rgb) / 0.5);
92
+ }
93
+
94
+ .nm-side-panel.nm-textarea-side-panel {
95
+ position: fixed;
96
+ top: 0;
97
+ right: 0;
98
+ bottom: 0;
99
+ z-index: calc(var(--nm-menu-z) + 1);
100
+ box-sizing: border-box;
101
+ display: flex;
102
+ flex: none;
103
+ flex-direction: column;
104
+ width: var(--nm-side-panel-basis, 50%);
105
+ border-inline-start: var(--nm-rule) solid var(--nm-divider);
106
+ background: var(--nm-canvas);
107
+ }
108
+
109
+ .nm-textarea-panel__body {
110
+ flex: 1;
111
+ display: flex;
112
+ flex-direction: column;
113
+ min-height: 0;
114
+ padding: var(--nm-space-12);
115
+ overflow: hidden;
116
+ }
117
+
118
+ .nm-textarea-panel__title {
119
+ margin: 0;
120
+ padding-inline-start: var(--nm-space-8);
121
+ font-size: var(--nm-type-ui);
122
+ font-weight: var(--nm-weight-semibold);
123
+ color: var(--nm-fg);
124
+ white-space: nowrap;
125
+ overflow: hidden;
126
+ text-overflow: ellipsis;
127
+ }
128
+
129
+ .nm-textarea-panel__editor {
130
+ box-sizing: border-box;
131
+ flex: 1;
132
+ width: 100%;
133
+ height: 100%;
134
+ min-height: 100%;
135
+ padding: var(--nm-space-16);
136
+ border: var(--nm-rule) solid var(--nm-line-strong);
137
+ border-radius: var(--nm-control-r);
138
+ outline: none;
139
+ resize: none;
140
+ background: var(--nm-raised);
141
+ color: var(--nm-fg);
142
+ font-family: var(--nm-font-mono);
143
+ font-size: var(--control-fs);
144
+ font-weight: var(--nm-weight-regular);
145
+ line-height: var(--nm-leading-relaxed);
146
+ }
147
+
148
+ .nm-textarea-panel__editor:focus-visible {
149
+ border-color: var(--nm-fg);
150
+ }
151
+
152
+ .nm-textarea-panel__preview {
153
+ box-sizing: border-box;
154
+ flex: 1;
155
+ width: 100%;
156
+ height: 100%;
157
+ padding: var(--nm-space-16);
158
+ overflow-y: auto;
159
+ border: var(--nm-rule) solid var(--nm-line-strong);
160
+ border-radius: var(--nm-control-r);
161
+ background: var(--nm-raised);
162
+ }
163
+
164
+ .nm-textarea-panel__empty {
165
+ margin: 0;
166
+ color: var(--nm-fg-subtle);
167
+ font-size: var(--nm-type-ui-sm);
168
+ font-style: italic;
169
+ }