@nordmanai/nif 0.0.0-stage → 0.2.0

package/registry/tokens.css

@@ -0,0 +1,72 @@
+/* Nordman design tokens: the one source for every colour on every Nordman page.
+   The website sets the theme with data-theme, the apps with html.light and html.dark.
+   --nm-* are the app names for the same values. Apps set them inline for custom appearance. */
+:root{
+  --bg:#ffffff; --bg-2:#fafafa; --bg-3:#f2f2f2;
+  --fg:#171717; --fg-2:#666666; --fg-3:#8f8f8f;
+  --line:#ebebeb; --line-2:#e0e0e0;
+  --btn:#171717; --btn-fg:#ffffff; --btn-2:#ffffff;
+  --glow:0,0,0; --glow-a:.16;
+  --ok:#16a34a; --focus:#0070f3;
+  --header:rgba(255,255,255,.85);
+  --nm-stroke:var(--fg-2);
+  --nm-canvas-rgb:255 255 255; --nm-fg-rgb:23 23 23;
+  --nm-fg-muted-rgb:102 102 102; --nm-fg-subtle-rgb:102 102 102; --nm-stroke-rgb:102 102 102;
+  --nm-line-rgb:235 235 235; --nm-panel-rgb:242 242 242; --nm-raised-rgb:250 250 250; --nm-inset-rgb:242 242 242;
+  color-scheme:light;
+  --nm-canvas:var(--bg); --nm-fg:var(--fg);
+  --nm-fg-muted:var(--fg-2); --nm-fg-subtle:var(--fg-2);
+  --nm-line:var(--line); --nm-line-strong:var(--line-2);
+  --nm-panel:var(--bg-3); --nm-raised:var(--bg-2); --nm-inset:var(--bg-3);
+
+  /* One geometry for controls on every page. */
+  --control-h:32px; --control-h-sm:28px; --control-h-lg:40px;
+  --control-r:6px; --control-px:calc(12px * var(--nm-space-scale, 1)); --control-gap:calc(8px * var(--nm-space-scale, 1));
+  --control-fs:14px; --control-fw:var(--nm-weight-medium); --btn-hover:.88;
+  --field-label-fs:13px; --field-label-gap:calc(6px * var(--nm-space-scale, 1)); --field-area-py:calc(10px * var(--nm-space-scale, 1));
+  --tab-py:calc(10px * var(--nm-space-scale, 1)); --tab-px:calc(14px * var(--nm-space-scale, 1)); --tab-rule:2px;
+  --toggle-pad:calc(3px * var(--nm-space-scale, 1)); --toggle-h:30px; --toggle-px:calc(14px * var(--nm-space-scale, 1)); --toggle-r:999px;
+  --badge-h:20px; --badge-px:calc(8px * var(--nm-space-scale, 1)); --badge-fs:11px; --badge-r:999px;
+  --table-fs:15px; --table-head-fs:13px; --table-head-py:calc(12px * var(--nm-space-scale, 1)); --table-cell-py:calc(16px * var(--nm-space-scale, 1)); --table-gap:calc(16px * var(--nm-space-scale, 1));
+}
+@media (prefers-color-scheme:dark){
+  :root:not([data-theme="light"]):not(.light){
+    --bg:#000000; --bg-2:#0a0a0a; --bg-3:#1a1a1a;
+    --fg:#ededed; --fg-2:#a1a1a1; --fg-3:#707070;
+    --line:#1f1f1f; --line-2:#2e2e2e;
+    --btn:#ededed; --btn-fg:#0a0a0a; --btn-2:#0a0a0a;
+    --glow:255,255,255; --glow-a:.5;
+    --ok:#3fcf75; --focus:#52a8ff;
+    --header:rgba(0,0,0,.8);
+    --nm-stroke:var(--fg-3);
+    --nm-canvas-rgb:0 0 0; --nm-fg-rgb:237 237 237;
+    --nm-fg-muted-rgb:161 161 161; --nm-fg-subtle-rgb:161 161 161; --nm-stroke-rgb:112 112 112;
+    --nm-line-rgb:31 31 31; --nm-panel-rgb:26 26 26; --nm-raised-rgb:10 10 10; --nm-inset-rgb:26 26 26;
+    color-scheme:dark;
+  }
+}
+:root[data-theme="dark"],:root.dark:not([data-theme="light"]){
+  --bg:#000000; --bg-2:#0a0a0a; --bg-3:#1a1a1a;
+  --fg:#ededed; --fg-2:#a1a1a1; --fg-3:#707070;
+  --line:#1f1f1f; --line-2:#2e2e2e;
+  --btn:#ededed; --btn-fg:#0a0a0a; --btn-2:#0a0a0a;
+  --glow:255,255,255; --glow-a:.5;
+  --ok:#3fcf75; --focus:#52a8ff;
+  --header:rgba(0,0,0,.8);
+  --nm-stroke:var(--fg-3);
+  --nm-canvas-rgb:0 0 0; --nm-fg-rgb:237 237 237;
+  --nm-fg-muted-rgb:161 161 161; --nm-fg-subtle-rgb:161 161 161; --nm-stroke-rgb:112 112 112;
+  --nm-line-rgb:31 31 31; --nm-panel-rgb:26 26 26; --nm-raised-rgb:10 10 10; --nm-inset-rgb:26 26 26;
+  color-scheme:dark;
+}
+
+/* Typeface. The one family every Nordman component and page sets its text in.
+   Poppins and Geist Mono are loaded by the app, or by @nordmanai/nif. Nothing may name another family. */
+:root{
+  --nm-font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
+  --nm-font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
+  --nm-weight-light:300; --nm-weight-regular:400; --nm-weight-medium:500; --nm-weight-semibold:600; --nm-weight-bold:700;
+}
+
+/* One height for every field: input, select, date, colour, input group. Content never changes it. */
+:root{ --nm-field-h:var(--control-h-lg); }

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

@@ -0,0 +1,358 @@
+  /* AI Elements. Spacing, radius and colour come from tokens, so Theming moves every element. */
+  .nm-ai-turn {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--nm-space-8);
+    width: 100%;
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    color: var(--nm-fg);
+  }
+
+  .nm-ai-turn--user {
+    align-items: flex-end;
+  }
+
+  .nm-ai-turn__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    min-width: 0;
+    max-width: 100%;
+    line-height: var(--nm-leading-normal);
+  }
+
+  .nm-ai-turn__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-4);
+  }
+
+  .nm-ai-bubble {
+    box-sizing: border-box;
+    max-width: 100%;
+    padding: var(--nm-space-12);
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    line-height: var(--nm-leading-normal);
+    overflow-wrap: anywhere;
+  }
+
+  .nm-ai-bubble--user {
+    background: var(--nm-panel);
+  }
+
+  .nm-ai-item {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-12);
+    box-sizing: border-box;
+    width: 100%;
+    padding: var(--nm-space-12);
+    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);
+  }
+
+  .nm-ai-item__media {
+    display: flex;
+    flex-shrink: 0;
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-ai-item__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+    min-width: 0;
+  }
+
+  .nm-ai-item__title {
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-ai-item__description {
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-ai-item__actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-ai-sheet {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    width: 100%;
+    padding: var(--nm-panel-pad);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-control-menu-radius);
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+  }
+
+  .nm-ai-sheet__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nm-space-8);
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-ai-sheet__body {
+    min-width: 0;
+  }
+
+  .nm-ai-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-8);
+    width: 100%;
+  }
+
+  .nm-ai-checkpoint {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-12);
+    width: 100%;
+    color: var(--nm-fg-subtle);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-ai-checkpoint::before,
+  .nm-ai-checkpoint::after {
+    content: '';
+    flex: 1;
+    height: var(--nm-rule);
+    background: var(--nm-line-strong);
+  }
+
+  .nm-ai-checkpoint__label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+  }
+
+
+
+  .nm-ai-context__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nm-space-12);
+  }
+
+  .nm-ai-context__head > span:last-child,
+  .nm-ai-context__rows > div > span:first-child {
+    color: var(--nm-fg-muted);
+  }
+
+  .nm-ai-context__rows {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-4);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-ai-context__rows > div {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--nm-space-12);
+  }
+
+  .nm-ai-tree {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    color: var(--nm-fg);
+  }
+
+  .nm-ai-tree .nm-ai-tree {
+    padding-left: var(--nm-space-16);
+  }
+
+  .nm-ai-tree__node {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    width: 100%;
+    padding: var(--nm-space-4) var(--nm-space-8);
+    border: 0;
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .nm-ai-tree__node[data-selected] {
+    background: var(--nm-line);
+    color: var(--nm-fg);
+  }
+
+  .nm-ai-tree__node:hover {
+    background: var(--nm-inset);
+  }
+
+  .nm-ai-tree__node[data-kind='file'] {
+    cursor: default;
+    color: var(--nm-fg-muted);
+  }
+
+  /* The chevron icon points down. Closed, a folder points right. Open, it points down. */
+  .nm-ai-tree__chevron {
+    display: inline-flex;
+    transform: rotate(-90deg);
+    transition: transform 0.15s;
+  }
+
+  .nm-ai-tree__chevron[data-open='true'] {
+    transform: none;
+  }
+
+  .nm-ai-citation {
+    display: inline;
+    padding: 0 var(--nm-space-6);
+    border-radius: var(--badge-r);
+    background: var(--nm-panel);
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+    vertical-align: baseline;
+    text-decoration: none;
+    cursor: default;
+  }
+
+  .nm-ai-suggestions {
+    display: flex;
+    gap: var(--nm-space-8);
+    max-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .nm-ai-suggestion {
+    flex-shrink: 0;
+    height: var(--control-h);
+    padding: 0 var(--control-px);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--toggle-r);
+    background: transparent;
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--control-fs);
+    font-weight: var(--nm-weight-medium);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .nm-ai-suggestion:hover:not(:disabled) {
+    background: var(--nm-inset);
+  }
+
+
+
+
+  .nm-ai-thread {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-24);
+    box-sizing: border-box;
+    width: 100%;
+    max-height: var(--nm-height-thread);
+    padding: var(--nm-space-16);
+    overflow-y: auto;
+  }
+
+  .nm-ai-thread__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--nm-space-8);
+    padding: var(--nm-gap-block) 0;
+    color: var(--nm-fg-muted);
+    font-family: var(--nm-font);
+    text-align: center;
+  }
+
+  .nm-ai-thread__jump {
+    position: sticky;
+    bottom: 0;
+    align-self: center;
+  }
+
+  .nm-ai-selector {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-ai-tests {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-4);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nm-ai-tests__row {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-ai-tests__row[data-status='failed'] {
+    color: var(--nm-fg);
+  }
+
+  .nm-ai-frame {
+    display: flex;
+    gap: var(--nm-space-8);
+    color: var(--nm-fg-muted);
+    font-family: var(--nm-font-mono);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-ai-frame[data-internal='true'] {
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-ai-steps {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-8);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* A step is a line with its description under it. The trace list lays every li out as a row, so this wins by class. */
+  .nm-ai-steps > .nm-ai-steps__item {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--nm-space-2);
+    padding: 0;
+  }
+
+  .nm-ai-steps__item > .nm-trace__description,
+  .nm-ai-steps__item > .nm-trace__badges {
+    margin-left: calc(var(--nm-icon-button) + var(--nm-space-8));
+  }