@cognite/aura 0.3.4 → 1.46104.0

package/dist/styles.source.css

@@ -9,6 +9,22 @@
 @source 'streamdown/dist';
 @source '@streamdown/mermaid/dist';
 @import 'streamdown/styles.css';
+@import 'katex/dist/katex.min.css';
+
+/*
+ * Assistant chat math: show full equation height; only scroll horizontally when wider
+ * than the bubble. overflow-x on inner .katex creates a spurious vertical scrollport.
+ */
+[data-slot='message-response'] .katex-display {
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+[data-slot='message-response'] .katex-display > .katex {
+  overflow: visible;
+  max-width: none;
+}
 
 @custom-variant dark (&:is(.dark *));
 
@@ -78,10 +94,11 @@
     0 20px 25px -5px var(--effect-shadow-xl),
     0 10px 10px -5px var(--effect-shadow-lg);
   /* modals; dialogs with backdrop overlay */
-  --shadow-focus-ring: 0 0 0 1px var(--ring), 0 0 0 3px var(--ring-muted);
+  --shadow-focus-ring:
+    0 0 0 1px var(--ring-default), 0 0 0 3px var(--ring-muted);
   /* default focus ring: inner border (1px dark) + outer glow (3px light, 2px visible beyond inner) */
   --shadow-focus-ring-destructive:
-    0 0 0 1px var(--ring-destructive), 0 0 0 3px var(--ring-destructive-muted);
+    0 0 0 1px var(--ring-critical), 0 0 0 3px var(--ring-critical-muted);
   --shadow-pinned-column:
     4px 0 8px 0 var(--effect-shadow-md), 3px 0 2px 0 var(--effect-shadow-md);
   /* horizontal edge shadow for the last pinned column in data grids */
@@ -169,10 +186,11 @@
   );
   --gradient-fall: linear-gradient(
     -100deg,
-    var(--fjord-550) 0%,
-    var(--dusk-550) 50%,
+    var(--fjord-500) 0%,
+    var(--dusk-500) 50%,
     var(--dusk-300) 100%
   );
+  /* Not from Figma Reflect sync — used by Shimmer variant="active". */
   --gradient-active: linear-gradient(
     90deg,
     var(--color-muted-foreground) 0%,
@@ -241,17 +259,11 @@
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-default outline-ring-default/50;
   }
 
   body {
-    @apply bg-background text-foreground;
-  }
-
-  :where(svg.tabler-icon) {
-    width: 1rem;
-    height: 1rem;
-    stroke-width: 1.5;
+    @apply bg-base-background text-base-foreground;
   }
 }
 

package/dist/utils/assign-ref.d.ts

@@ -0,0 +1,3 @@
+import type { Ref } from "react";
+declare function assignRef<T>(ref: Ref<T>, value: T | null): void;
+export { assignRef };

package/dist/utils/assign-ref.js

@@ -0,0 +1,13 @@
+function isMutableRef(ref) {
+    return typeof ref === 'object' && ref !== null && 'current' in ref;
+}
+function assignRef(ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+        return;
+    }
+    if (isMutableRef(ref)) ref.current = value;
+}
+export { assignRef };
+
+//# sourceMappingURL=assign-ref.js.map

package/dist/utils/assign-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/assign-ref.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from 'react';\n\nfunction isMutableRef<T>(ref: Ref<T>): ref is MutableRefObject<T | null> {\n  return typeof ref === 'object' && ref !== null && 'current' in ref;\n}\n\nfunction assignRef<T>(ref: Ref<T>, value: T | null): void {\n  if (typeof ref === 'function') {\n    ref(value);\n    return;\n  }\n  if (isMutableRef(ref)) ref.current = value;\n}\n\nexport { assignRef };\n"],"names":["isMutableRef","ref","assignRef","value","current"],"mappings":"AAEA,SAASA,aAAgBC,GAAW;IAClC,OAAO,OAAOA,QAAQ,YAAYA,QAAQ,QAAQ,aAAaA;AACjE;AAEA,SAASC,UAAaD,GAAW,EAAEE,KAAe;IAChD,IAAI,OAAOF,QAAQ,YAAY;QAC7BA,IAAIE;QACJ;IACF;IACA,IAAIH,aAAaC,MAAMA,IAAIG,OAAO,GAAGD;AACvC;AAEA,SAASD,SAAS,GAAG"}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@cognite/aura",
-  "version": "0.3.4",
+  "version": "1.46104.0",
+  "license": "MIT",
   "type": "module",
   "sideEffects": [
     "**/*.scss",
@@ -75,6 +76,10 @@
       "import": "./dist/components/ui/core/command/command.js",
       "types": "./dist/components/ui/core/command/command.d.ts"
     },
+    "./components/conversation": {
+      "import": "./dist/components/ui/core/conversation/conversation.js",
+      "types": "./dist/components/ui/core/conversation/conversation.d.ts"
+    },
     "./components/count": {
       "import": "./dist/components/ui/core/count/count.js",
       "types": "./dist/components/ui/core/count/count.d.ts"
@@ -115,6 +120,14 @@
       "import": "./dist/components/ui/core/input-group/input-group.js",
       "types": "./dist/components/ui/core/input-group/input-group.d.ts"
     },
+    "./components/item": {
+      "import": "./dist/components/ui/core/item/item.js",
+      "types": "./dist/components/ui/core/item/item.d.ts"
+    },
+    "./components/tree": {
+      "import": "./dist/components/ui/core/tree/tree.js",
+      "types": "./dist/components/ui/core/tree/tree.d.ts"
+    },
     "./components/kbd": {
       "import": "./dist/components/ui/core/kbd/kbd.js",
       "types": "./dist/components/ui/core/kbd/kbd.d.ts"
@@ -215,6 +228,10 @@
       "import": "./dist/components/ui/core/tool/tool.js",
       "types": "./dist/components/ui/core/tool/tool.d.ts"
     },
+    "./components/toolbar": {
+      "import": "./dist/components/ui/core/toolbar/toolbar.js",
+      "types": "./dist/components/ui/core/toolbar/toolbar.d.ts"
+    },
     "./components/tooltip": {
       "import": "./dist/components/ui/core/tooltip/tooltip.js",
       "types": "./dist/components/ui/core/tooltip/tooltip.d.ts"
@@ -227,6 +244,10 @@
       "import": "./dist/components/ui/core/chart/index.js",
       "types": "./dist/components/ui/core/chart/index.d.ts"
     },
+    "./data-grid": {
+      "import": "./dist/components/ui/core/data-grid/index.js",
+      "types": "./dist/components/ui/core/data-grid/index.d.ts"
+    },
     "./highlight-code": {
       "import": "./dist/lib/highlight-code.js",
       "types": "./dist/lib/highlight-code.d.ts"
@@ -252,14 +273,27 @@
     "./colors.css": {
       "default": "./dist/colors.css"
     },
-    "./DESIGN.md": "./DESIGN.md"
+    "./colors-deprecated.css": {
+      "default": "./dist/colors-deprecated.css"
+    },
+    "./DESIGN.md": "./DESIGN.md",
+    "./docs/*": "./src/components/ui/core/*/*.md",
+    "./examples/*": {
+      "import": "./dist/components/ui/core/*/*.gallery.js",
+      "types": "./dist/components/ui/core/*/*.gallery.d.ts"
+    }
   },
   "files": [
     "dist",
-    "DESIGN.md"
+    "CHANGELOG.md",
+    "DESIGN.md",
+    "src/components/**/*.md"
   ],
   "dependencies": {
     "@base-ui/react": "^1.6.0",
+    "@headless-tree/core": "^1.7.0",
+    "@headless-tree/react": "^1.7.0",
+    "@streamdown/math": "^1.0.2",
     "@streamdown/mermaid": "^1.0.2",
     "@tabler/icons-react": "^3.35.0",
     "class-variance-authority": "^0.7.1",
@@ -267,16 +301,16 @@
     "cmdk": "^1.1.1",
     "dayjs": "^1.11.13",
     "framer-motion": "^11.0.3",
+    "katex": "0.18.2",
     "shiki": "^3.19.0",
     "sonner": "^2.0.7",
     "streamdown": "^2.4.0",
     "tailwind-merge": "^3.4.0",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "use-stick-to-bottom": "^1.1.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.2",
-    "@nx/vite": "22.6.1",
-    "@storybook/addon-coverage": "^3.0.1",
     "@storybook/addon-docs": "10.3.5",
     "@storybook/addon-vitest": "10.3.5",
     "@storybook/react-vite": "10.3.5",
@@ -297,22 +331,22 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "recharts": "^3.7.0",
-    "rollup": "^4.59.0",
+    "rolldown": "^1.1.4",
     "storybook": "10.3.5",
     "tailwindcss": "^4.3.1",
-    "typescript": "5.8.3",
+    "typescript": "6.0.3",
     "typescript-eslint": "^8.57.1",
-    "vite": "^8.1.4",
+    "vite": "8.2.2",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "@tanstack/react-table": "^8.7.4",
     "@tanstack/react-virtual": "^3.10.8",
-    "eslint": "^9.6.0 || ^10.0.0",
+    "eslint": "9.39.4",
     "react": "^18.3.1",
     "recharts": "^3.7.0",
-    "tailwindcss": "^4.1.17"
+    "tailwindcss": "^4.3.1"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-table": {
@@ -330,5 +364,10 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cognitedata/infrastructure.git",
+    "directory": "lib/ts/aura"
   }
 }

package/src/components/ui/core/button/button.md

@@ -0,0 +1,93 @@
+Use a Button to communicate actions users can take and to allow users to interact with the page.
+Each page should have only one primary Button, and any remaining calls to action should be represented as lower-emphasis Buttons.
+
+## Placement
+
+Buttons should be placed contextually near the objects they affect for easy discoverability.
+
+## Right side
+
+Buttons should always be placed furthest right in the following contexts:
+
+- Full page: If the action affects the entire content on the page, Buttons should be placed either in the page header area on the right or within the Page toolbar with the Primary Button being furthest right.
+- In side panels: Buttons can be placed in the header or footer area, with the Primary Button being furthest right.
+- In Dialogs, steppers or wizards: Buttons always appear in the footer, with the Primary Button being furthest right.
+
+## Left side
+
+Buttons may make more sense to place on the left side in the following contexts:
+
+- Cards: Card content is always left aligned and Buttons placed on the left to align with content makes for better readability.
+- Lists: In dense lists when content is left aligned, it may make more sense to place relevant Buttons on the left to align with content.
+
+## When to use a full width Button
+
+Buttons by default have fixed paddings.
+The width of the Button adjusts to accommodate the label keeping the correct padding on all sides.
+
+However, Buttons can span the full width of their parent container.
+Full width buttons help visually distinguish actions from other screen elements so they are easier to detect.
+The content of the Button always stays centered.
+Examples of when you might want to use a full width Button are in narrow side panels or small containers such as Popovers and Menus.
+
+## Grouping
+
+- Small groups (2-3): Use secondary and/or ghost buttons (plus one primary if needed) with 8px spacing between buttons.
+- Large groups (3+, e.g., toolbars): Use mainly ghost buttons to reduce visual clutter with 8px spacing between buttons.
+
+## Variants and when to use them
+
+- Consider Button hierarchy: We use different Button types to establish a visual hierarchy.
+  You don't always need to use the secondary Button as the second Button in your layout.
+  The most important thing is to establish a visual hierarchy between the buttons in your UI, which is why only one primary Button should be used on a page.
+- Type indicates importance: The Button type should be chosen based on the importance of the action.
+  More important, more emphasis.
+- Verb + noun format: Reference action label guidelines in the design.md file to use the appropriate verb.
+  It's always best to use a label with your Button unless the icon is highly recognizable, such as the save (floppy disk) or delete (trash bin) icons, or space is limited.
+  Alternatively, use an icon button with a [Tooltip](?path=/docs/primitives-tooltip--docs).
+- Avoid disabled Buttons: Disabled Buttons can be confusing and frustrating for many users and can be difficult to spot for those with low vision or users relying on keyboard interactions, since disabled Buttons won't take keyboard focus.
+  To make things easier, enable the Button so users can click it, and provide an error message or inline validation if information is incorrect or missing.
+  Or try using alternative methods to activate a Button control such as selections that trigger an [Action toolbar](?path=/docs/primitives-actiontoolbar--docs).
+  If you must use a disabled Button, include clarifying text or a tooltip to explain why.
+
+| Variant             | Use                                                                                                                                                                                       | When NOT to use                                                             | Max number per context |
+| :------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------- | :--------------------- |
+| `default` (primary) | The single most important action on a screen                                                                                                                                              | Don't use more than once per view. Never for navigation.                    | 1                      |
+| `secondary`         | Supporting actions that aren't the primary CTA                                                                                                                                            | Don't use as a substitute for a primary button                              | A few                  |
+| `outline`           | Low-emphasis actions in dense UI or to create contrast with background colors                                                                                                             | Don't use as the primary action                                             | A few                  |
+| `ghost`             | Tertiary actions, icon buttons in toolbars                                                                                                                                                | Don't use as a primary or secondary action                                  | As many as needed      |
+| `destructive`       | Irreversible, high-consequence actions (delete, remove), most commonly in [Dialog](?path=/docs/primitives-dialog--docs)s or [Action toolbar](?path=/docs/primitives-actiontoolbar--docs)s | Don't use for general negative actions — only for truly destructive commits | 1                      |
+| `loading`           | Actions that are in progress                                                                                                                                                              | Don't use for general page loading states                                   | 1 at a time            |
+
+## Dos and don'ts
+
+- **Do** use only one `default` (primary) button per view, if needed.
+- **Do** use size="sm" for buttons in the Topbar action slot. Match this in your designs.
+- **Don't** use a button where a link should be.
+  Buttons change state or trigger actions.
+  Links navigate.
+- **Don't** use `destructive` buttons inline as the first interaction.
+  Use a `ghost` or other Button type then use the `destructive` Button when the user confirms the action.
+
+## Behavior
+
+- Primary action submits or commits the labeled operation; support keyboard activation (Enter / Space) when the control is focusable.
+- Loading state should prevent duplicate submissions where the action is not idempotent.
+- Icon-only buttons must have an accessible name (visible label, [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label), or [Tooltip](?path=/docs/primitives-tooltip--docs) that is exposed to assistive tech per implementation).
+
+## Toggle vs Button
+
+A standard Button triggers a one time action and returns to its resting state immediately after, whereas a Toggle maintains an on/off state until clicked again.
+Toggled Buttons have different visual identities than Buttons and should be used to indicate the following interactions:
+
+- A selected element such as in a Toolbar.
+- An applied filter such as in Page toolbar.
+
+## Often used with
+
+[Tooltip](?path=/docs/primitives-tooltip--docs) on icon-only triggers; [Menu](?path=/docs/primitives-dropdown-menu--docs) (dropdown / split); [KBD](?path=/docs/primitives-kbd--docs) hints in labels; pairs with [Dialog](?path=/docs/primitives-dialog--docs), [Popover](?path=/docs/primitives-popover--docs), or [Action toolbar](?path=/docs/primitives-actiontoolbar--docs) as trigger.
+
+## Accessibility
+
+- Icon-only buttons: Always provide an explicit `aria-label` or an internal screen-reader-only text element (`<span className="sr-only">`) when no visual text label exists.
+- Disabled states: Use `aria-disabled="true"` rather than native HTML `disabled` attributes if you need the button to retain keyboard focusability (e.g., to trigger an explanatory disabled-state tooltip).