@nadicodeai/ui 12.1.51 → 12.1.53

package/dist/index.js

@@ -4,15 +4,17 @@ export * from "./components/action-menu.js";
 export * from "./components/action-status.js";
 export * from "./components/activity-calendar.js";
 export * from "./components/agent-card.js";
+export * from "./components/agent-list-row.js";
 export * from "./components/agent-orb.js";
 export * from "./components/alert.js";
 export * from "./components/alert-dialog.js";
 export * from "./components/app-mark.js";
 export * from "./components/app-mark-frame.js";
 export * from "./components/app-mark-lazy.js";
+export * from "./components/approval-row.js";
 export * from "./components/aspect-ratio.js";
-export * from "./components/avatar.js";
 export * from "./components/automation-section.js";
+export * from "./components/avatar.js";
 export * from "./components/badge.js";
 export * from "./components/brand.js";
 export * from "./components/brand-field.js";
@@ -24,10 +26,11 @@ export * from "./components/calendar.js";
 export * from "./components/card.js";
 export * from "./components/card-row.js";
 export * from "./components/carousel.js";
+export * from "./components/channel-view.js";
 export * from "./components/chart.js";
 export * from "./components/chart-area-stacked.js";
-export * from "./components/chart-bar-multiple.js";
 export * from "./components/chart-bar-horizontal.js";
+export * from "./components/chart-bar-multiple.js";
 export * from "./components/chart-bar-stacked.js";
 export * from "./components/chart-card.js";
 export * from "./components/chart-date-range.js";
@@ -40,6 +43,7 @@ export * from "./components/collection-filters.js";
 export * from "./components/collection-toolbar.js";
 export * from "./components/combobox.js";
 export * from "./components/command.js";
+export * from "./components/company-card.js";
 export * from "./components/confirm-dialog.js";
 export * from "./components/context-menu.js";
 export * from "./components/dashboard-shell.js";
@@ -52,6 +56,7 @@ export * from "./components/disclosure-row.js";
 export * from "./components/drawer.js";
 export * from "./components/dropdown-menu.js";
 export * from "./components/empty.js";
+export * from "./components/entry-scene.js";
 export * from "./components/expandable-block.js";
 export * from "./components/feedback-state.js";
 export * from "./components/field.js";
@@ -76,14 +81,17 @@ export * from "./components/menu-choice-row.js";
 export * from "./components/menubar.js";
 export * from "./components/model-identity.js";
 export * from "./components/model-mark.js";
+export * from "./components/nadia-presence.js";
 export * from "./components/native-select.js";
 export * from "./components/navigation-menu.js";
 export * from "./components/notice-banner.js";
+export * from "./components/object-workspace.js";
 export * from "./components/pagination.js";
 export * from "./components/pending-label.js";
 export * from "./components/picture-label.js";
 export * from "./components/plugin-slot-boundary.js";
 export * from "./components/popover.js";
+export * from "./components/portal-sidebar-frame.js";
 export * from "./components/progress.js";
 export * from "./components/radio-group.js";
 export * from "./components/reading-column.js";
@@ -106,7 +114,6 @@ export * from "./components/switch.js";
 export * from "./components/table.js";
 export * from "./components/table-card.js";
 export * from "./components/table-value.js";
-export * from "./components/object-workspace.js";
 export * from "./components/tabs.js";
 export * from "./components/text-link.js";
 export * from "./components/textarea.js";

package/dist/styles/components.css

@@ -151,3 +151,570 @@
     }
   }
 }
+
+/*
+ * Nadia's entry screen, contained (`components/entry-scene.tsx`,
+ * `components/nadia-presence.tsx`).
+ *
+ * The products paint this screen as a window-filling dialog; here it is a box
+ * of the window's own shape, so it can stand on a page. The box is the query
+ * container, so the screen answers its own width and never the viewport's.
+ *
+ * These rules name the raw tokens rather than the host's roles: the screen is
+ * true black in every theme, so it reads the dark ladder directly instead of
+ * branching on the host's mode. The room scopes `dark`, so every role it does
+ * not paint itself, the focus outline among them, takes its dark value too.
+ */
+
+.nc-entry-scene {
+  container-type: size;
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  width: 100%;
+  background: var(--nc-identity-ink);
+}
+
+.nc-entry-room {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: safe center;
+  gap: var(--nc-md);
+  padding: var(--entry-pad);
+  overflow: hidden;
+  color: var(--nc-dark-ink);
+  font-family: var(--nc-type-body-md-font-family);
+
+  --entry-pad: var(--nc-xl);
+  --entry-presence-size: 160px;
+  --entry-picture-subject-ratio: 0.42;
+  /*
+   * The picture is as wide as the room allows: never past the source at 2x,
+   * never so wide that its subject reaches the message column, and never so
+   * tall that the figure's feet fall below the floor.
+   */
+  --entry-picture-width: min(
+    836px,
+    calc((100cqw - 20rem - var(--entry-pad) * 2) / (var(--entry-picture-subject-ratio) * 2)),
+    calc(100cqh * 1672 / var(--entry-picture-feet, 906))
+  );
+}
+
+/* The presence ------------------------------------------------------------ */
+
+.nc-entry-presence {
+  position: relative;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: var(--entry-presence-size, 160px);
+  aspect-ratio: 1;
+  transition: opacity var(--nc-duration-confirm) var(--nc-ease-emphasized);
+}
+
+.nc-entry-presence-figure {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  transition: opacity var(--nc-duration-confirm) var(--nc-ease-emphasized);
+}
+
+.nc-entry-presence-figure,
+.nc-entry-presence-figure canvas {
+  width: var(--entry-presence-size, 160px);
+  height: var(--entry-presence-size, 160px);
+}
+
+.nc-entry-presence[data-state="error"] {
+  opacity: 0.62;
+}
+
+/*
+ * The screen ships its own visually-hidden helper: a host that takes the token
+ * layer and nothing else has no utility layer, and a progress value nobody can
+ * read is not an accessible progress value.
+ */
+.nc-entry-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* The picture and the mark ------------------------------------------------ */
+
+.nc-entry-picture {
+  position: absolute;
+  left: 0;
+  bottom: calc(var(--entry-picture-width) * (var(--entry-picture-feet, 906) - 941) / 1672);
+  z-index: 0;
+  width: var(--entry-picture-width);
+  pointer-events: none;
+  user-select: none;
+  transition: opacity var(--nc-duration-open) var(--nc-ease-emphasized);
+}
+
+.nc-entry-picture img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+/* A failure quiets the picture; it is never removed. */
+.nc-entry-room[data-view="error"] .nc-entry-picture,
+.nc-entry-room[data-view="refused"] .nc-entry-picture,
+.nc-entry-room[data-view="failure"] .nc-entry-picture {
+  opacity: 0.5;
+}
+
+.nc-entry-header {
+  position: absolute;
+  top: var(--entry-pad);
+  left: var(--entry-pad);
+  z-index: 2;
+  color: var(--nc-identity-white);
+
+  --nc-logo-dot: var(--nc-dark-logo-dot);
+}
+
+.nc-entry-header svg {
+  display: block;
+  width: auto;
+  height: 24px;
+}
+
+/* The group --------------------------------------------------------------- */
+
+.nc-entry-figure {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  justify-items: center;
+}
+
+.nc-entry-body {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  justify-items: center;
+  gap: var(--nc-md);
+  width: 100%;
+  max-width: 20rem;
+  text-align: center;
+}
+
+.nc-entry-body:empty {
+  display: none;
+}
+
+.nc-entry-message {
+  margin: 0;
+  min-height: calc(var(--nc-type-body-md-line-height) * var(--entry-message-lines, 1));
+  display: grid;
+  align-items: center;
+  font-family: var(--nc-type-body-md-font-family);
+  font-size: var(--nc-type-body-md-font-size);
+  font-weight: var(--nc-type-body-md-font-weight);
+  line-height: var(--nc-type-body-md-line-height);
+  letter-spacing: var(--nc-type-body-md-letter-spacing);
+  text-wrap: balance;
+  color: var(--nc-dark-ink);
+}
+
+.nc-entry-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--nc-sm);
+}
+
+.nc-entry-action {
+  min-height: var(--nc-control-height);
+  padding: var(--nc-xs) var(--nc-md);
+  border-radius: var(--nc-rounded-md);
+  font-family: var(--nc-type-body-sm-font-family);
+  font-size: var(--nc-type-body-sm-font-size);
+  font-weight: 500;
+  line-height: var(--nc-type-body-sm-line-height);
+  background: var(--nc-dark-action);
+  color: var(--nc-dark-action-foreground);
+  transition:
+    background-color var(--nc-duration-control) var(--nc-ease-out-strong),
+    color var(--nc-duration-control) var(--nc-ease-out-strong);
+}
+
+.nc-entry-action:hover:not(:disabled) {
+  background: var(--nc-dark-action-hover);
+  color: var(--nc-dark-action-foreground);
+}
+
+.nc-entry-action:active:not(:disabled),
+.nc-entry-action[data-pressed]:not(:disabled) {
+  background: var(--nc-dark-action-active);
+  color: var(--nc-dark-action-foreground);
+}
+
+.nc-entry-action:disabled {
+  opacity: 0.5;
+}
+
+.nc-entry-action:focus-visible {
+  outline: 2px solid var(--nc-dark-focus-ring);
+  outline-offset: 2px;
+}
+
+.nc-entry-action[data-variant="secondary"] {
+  background: transparent;
+  border: var(--nc-guide) solid var(--nc-dark-line);
+  color: var(--nc-dark-body);
+}
+
+.nc-entry-action[data-variant="secondary"]:hover:not(:disabled) {
+  background: var(--nc-dark-canvas-soft);
+  color: var(--nc-dark-ink);
+}
+
+/* Measured work ----------------------------------------------------------- */
+
+.nc-entry-progress {
+  display: grid;
+  justify-items: center;
+  gap: var(--nc-xs);
+  width: 100%;
+  max-width: 18rem;
+}
+
+.nc-entry-progress-track {
+  width: 100%;
+  height: 2px;
+  overflow: hidden;
+  background: var(--nc-dark-line);
+}
+
+.nc-entry-progress-value {
+  height: 100%;
+  background: var(--nc-dark-ink);
+  transition: width var(--nc-duration-transition) var(--nc-ease-out-strong);
+}
+
+/* The value grows; the fades are paint and stay. */
+@media (prefers-reduced-motion: reduce) {
+  .nc-entry-progress-value {
+    transition: none;
+  }
+}
+
+.nc-entry-progress-count {
+  font-family: var(--nc-type-label-mono-font-family);
+  font-size: var(--nc-type-label-mono-font-size);
+  line-height: var(--nc-type-label-mono-line-height);
+  font-variant-numeric: tabular-nums;
+  color: var(--nc-dark-muted);
+}
+
+/* The stages -------------------------------------------------------------- */
+
+.nc-entry-stages {
+  display: grid;
+  gap: var(--nc-xs);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-align: start;
+  font-family: var(--nc-type-body-sm-font-family);
+  font-size: var(--nc-type-body-sm-font-size);
+  line-height: var(--nc-type-body-sm-line-height);
+  color: var(--nc-dark-muted);
+}
+
+.nc-entry-stages li {
+  display: flex;
+  align-items: center;
+  gap: var(--nc-sm);
+  transition: color var(--nc-duration-transition) var(--nc-ease-out-strong);
+}
+
+.nc-entry-stages li[data-mark="done"] {
+  color: var(--nc-dark-body);
+}
+
+.nc-entry-stages li[data-mark="current"] {
+  color: var(--nc-dark-ink);
+  font-weight: 500;
+}
+
+.nc-entry-mark {
+  position: relative;
+  flex: none;
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid var(--nc-dark-line);
+  border-radius: var(--nc-rounded-full);
+}
+
+[data-mark="current"] > .nc-entry-mark {
+  border-color: var(--nc-dark-ink);
+}
+
+[data-mark="current"] > .nc-entry-mark::after {
+  content: "";
+  position: absolute;
+  inset: 2.5px;
+  border-radius: inherit;
+  background: var(--nc-dark-ink);
+}
+
+[data-mark="done"] > .nc-entry-mark {
+  border-color: var(--nc-dark-body);
+}
+
+[data-mark="done"] > .nc-entry-mark::after {
+  content: "";
+  position: absolute;
+  left: 3.5px;
+  top: 1px;
+  width: 3.5px;
+  height: 7px;
+  border: solid var(--nc-dark-body);
+  border-width: 0 1.5px 1.5px 0;
+  transform: rotate(45deg);
+}
+
+/*
+ * A narrow box is the product's small window: the ribbon halves and the
+ * picture gives the message column the room it needs.
+ */
+@container (max-width: 639px) {
+  .nc-entry-room {
+    --entry-pad: var(--nc-md);
+    --entry-presence-size: 96px;
+    --entry-picture-width: min(56cqw, calc(100cqh * 1672 / var(--entry-picture-feet, 906)));
+  }
+
+  .nc-entry-body {
+    max-width: 100%;
+  }
+}
+
+/*
+ * The company card, contained (`components/company-card.tsx`;
+ * design-system DESIGN.md, "Company card").
+ *
+ * The card is one object of the ID-1 proportion, dark by nature in every
+ * theme, so these rules name the raw dark tokens rather than the host's roles;
+ * the card element scopes `dark` so every role it does not paint itself takes
+ * its dark value too. The scene is the query container, so every measure on
+ * the card is a share of its own width and the card reads the same at any size.
+ *
+ * The component sets `--tilt-x`, `--tilt-y`, `--light-x`, `--light-y` and
+ * `--foil` on the card frame by frame, and `data-tracking` while it does, so
+ * the transitions below get out of the way of the pointer.
+ */
+
+.nc-company-card-scene {
+  container-type: inline-size;
+  width: 100%;
+  perspective: 900px;
+}
+
+.nc-company-card {
+  --tilt-x: 0deg;
+  --tilt-y: 0deg;
+  --light-x: 30%;
+  --light-y: 20%;
+  --foil: 0;
+
+  position: relative;
+  aspect-ratio: 856 / 540;
+  overflow: hidden;
+  border-radius: 3.7cqi;
+  background: var(--nc-dark-material-floating);
+  color: var(--nc-identity-white);
+  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
+  transition: transform var(--nc-duration-transition) var(--nc-ease-out-strong);
+}
+
+.nc-company-card-gpu {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.nc-company-card[data-foil="gpu"] .nc-company-card-gpu {
+  opacity: 1;
+}
+
+.nc-company-card[data-foil="gpu"] .nc-company-card-foil,
+.nc-company-card[data-foil="gpu"] .nc-company-card-glare,
+.nc-company-card[data-foil="gpu"] .nc-company-card-waves {
+  display: none;
+}
+
+/* vgpu's renderer eases the turn itself, frame by frame. */
+.nc-company-card[data-foil="gpu"] {
+  transition: none;
+}
+
+.nc-company-card-engraving {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  color: var(--nc-identity-white);
+}
+
+.nc-company-card-lines {
+  opacity: 0.1;
+}
+
+.nc-company-card-foil,
+.nc-company-card-glare {
+  opacity: var(--foil);
+  transition: opacity var(--nc-duration-transition) var(--nc-ease-out-strong);
+}
+
+.nc-company-card-glare {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    circle at var(--light-x) var(--light-y),
+    color-mix(in srgb, var(--nc-identity-white) 12%, transparent) 0 8%,
+    transparent 46%
+  );
+  mix-blend-mode: plus-lighter;
+}
+
+.nc-company-card[data-tracking="true"],
+.nc-company-card[data-tracking="true"] .nc-company-card-foil,
+.nc-company-card[data-tracking="true"] .nc-company-card-glare {
+  transition: none;
+}
+
+.nc-company-card-face {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  padding: 6.4cqi 7cqi;
+}
+
+.nc-company-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4cqi;
+}
+
+.nc-company-card-marks {
+  display: flex;
+  align-items: center;
+  gap: 2.6cqi;
+  min-width: 0;
+}
+
+.nc-company-card-rule {
+  flex-shrink: 0;
+  width: 0.25cqi;
+  height: 5.6cqi;
+  background: color-mix(in srgb, var(--nc-identity-white) 35%, transparent);
+}
+
+/* The logo is stored as one ink in white, so it sits on the graphite as the wordmark does. */
+.nc-company-card-logo {
+  display: block;
+  width: auto;
+  max-width: 26cqi;
+  height: 5.6cqi;
+  object-fit: contain;
+  object-position: left center;
+}
+
+.nc-company-card-edition,
+.nc-company-card-since {
+  font-family: var(--nc-type-label-mono-font-family);
+  font-size: 2.6cqi;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  opacity: 0.72;
+}
+
+.nc-company-card-bottom {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 4cqi;
+  min-width: 0;
+}
+
+.nc-company-card-holder {
+  display: grid;
+  gap: 1.2cqi;
+  min-width: 0;
+}
+
+.nc-company-card-name {
+  font-size: 5.4cqi;
+  font-weight: 500;
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nc-company-card-domain {
+  font-size: 3.2cqi;
+  opacity: 0.72;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nc-company-card-placeholder {
+  opacity: 0.38;
+}
+
+.nc-company-card-since {
+  flex-shrink: 0;
+}
+
+@keyframes nc-company-card-issue {
+  from {
+    transform: translateY(3cqi) scale(0.97);
+  }
+}
+
+@keyframes nc-company-card-catch-light {
+  45% {
+    opacity: 0.8;
+  }
+}
+
+.nc-company-card[data-issued="true"] {
+  animation: nc-company-card-issue var(--nc-duration-transition) var(--nc-ease-out-strong);
+}
+
+.nc-company-card[data-issued="true"] .nc-company-card-foil,
+.nc-company-card[data-issued="true"] .nc-company-card-glare {
+  animation: nc-company-card-catch-light var(--nc-duration-transition) var(--nc-ease-out-strong);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nc-company-card {
+    transform: none;
+  }
+
+  .nc-company-card[data-issued="true"] {
+    animation: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.51",
+  "version": "12.1.53",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -77,7 +77,7 @@
     "@assistant-ui/react": "0.15.22",
     "@assistant-ui/react-markdown": "0.14.17",
     "@base-ui/react": "^1.8.0",
-    "@nadicodeai/design-system": "12.1.51",
+    "@nadicodeai/design-system": "12.1.53",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -96,6 +96,7 @@
     "tailwind-merge": "^3.7.0",
     "thinking-orbs": "0.3.2",
     "tw-animate-css": "^1.4.0",
+    "vgpu": "0.5.0",
     "zustand": "^5.0.14"
   },
   "peerDependencies": {