@nordmanai/nif 0.2.11 → 0.2.13

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

@@ -2,6 +2,7 @@
  * Composer: the message box. Built from the Nordman AI design:
  * one framed box, the text on top, actions in a row beneath. Add on the left, dictate and voice on the right.
  */
+import { NM_SHAPE_ATTRIBUTE } from './nm-shape.ts';
 export const NM_COMPOSER_COPY = {
   placeholder: 'Ask Nordman',
   attach: 'Add',
@@ -44,6 +45,8 @@ export const NM_COMPOSER_CLASSES = {
   primary: 'nm-composer__button--primary',
   stopMark: 'nm-composer__stop-mark',
 } as const;
+/** Set on the root with a shape value; every button in the bar, own or hosted, takes that shape. */
+export const NM_COMPOSER_SHAPE_ATTRIBUTE = NM_SHAPE_ATTRIBUTE;
 
 export type NmComposerAttachment = { id: string; name: string };
 

package/registry/ui/config/nm-icon-button.ts

@@ -1,3 +1,4 @@
+import { NM_CONTROL_SHAPES, type NmControlShape } from './nm-shape.ts';
 export const NM_ICON_BUTTON_TONES = {
   line: 'line',
   raised: 'raised',
@@ -19,15 +20,20 @@ export const NM_ICON_BUTTON_CLASSES = {
   solid: 'nm-icon-button--solid',
   panel: 'nm-icon-button--panel',
   invert: 'nm-icon-button--invert',
+  round: 'nm-icon-button--round',
 } as const;
 
 /** Shared geometry hook for send / stop / during-run primary composer actions. */
 export const NM_CHATBOX_ACTION_CLASS = 'nm-chatbox__send';
 
-export function nmIconButtonClassName(tone: NmIconButtonTone = NM_ICON_BUTTON_TONES.quiet): string {
-  return `${NM_ICON_BUTTON_CLASSES.root} ${NM_ICON_BUTTON_CLASSES[tone]}`;
+export function nmIconButtonClassName(
+  tone: NmIconButtonTone = NM_ICON_BUTTON_TONES.quiet,
+  shape?: NmControlShape,
+): string {
+  const base = `${NM_ICON_BUTTON_CLASSES.root} ${NM_ICON_BUTTON_CLASSES[tone]}`;
+  return shape === NM_CONTROL_SHAPES.round ? `${base} ${NM_ICON_BUTTON_CLASSES.round}` : base;
 }
-
-export function nmChatboxActionButtonClassName(): string {
-  return `${NM_ICON_BUTTON_CLASSES.root} ${NM_ICON_BUTTON_CLASSES.invert} ${NM_CHATBOX_ACTION_CLASS}`;
+export function nmChatboxActionButtonClassName(shape?: NmControlShape): string {
+  const base = `${NM_ICON_BUTTON_CLASSES.root} ${NM_ICON_BUTTON_CLASSES.invert} ${NM_CHATBOX_ACTION_CLASS}`;
+  return shape === NM_CONTROL_SHAPES.round ? `${base} ${NM_ICON_BUTTON_CLASSES.round}` : base;
 }

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

@@ -0,0 +1,11 @@
+/**
+ * Control shape. Soft is the kit default: corners follow the themed radius scale.
+ * Round is a full circle (or pill): it ignores the radius scale, a circle has no corner to scale.
+ */
+export const NM_CONTROL_SHAPES = {
+  soft: 'soft',
+  round: 'round',
+} as const;
+export type NmControlShape = (typeof NM_CONTROL_SHAPES)[keyof typeof NM_CONTROL_SHAPES];
+/** The data attribute a container sets to round every control inside it. */
+export const NM_SHAPE_ATTRIBUTE = 'data-button-shape';

package/registry/ui/styles/tokens.css

@@ -93,6 +93,8 @@
   --nm-radius-sm: calc(4px * var(--nm-radius-scale));
   --nm-radius-md: calc(8px * var(--nm-radius-scale));
   --nm-radius-lg: calc(12px * var(--nm-radius-scale));
+  /* A full circle or pill. Not scaled: a circle has no corner. */
+  --nm-radius-round: 9999px;
   /* 100% by default. The Space setting scales every spacing token. */
   --nm-space-scale: 1;
   --nm-space-2: calc(0.125rem * var(--nm-space-scale));