nuvox 0.1.3 → 0.1.5

package/dist/react/index.css

@@ -4297,6 +4297,8 @@
   position: relative;
   overflow: hidden;
   border-radius: var(--radius-lg, 12px);
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, transparent);
+  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
   grid-row: 1;
   grid-column: 1;
 }
@@ -4335,7 +4337,7 @@
   justify-content: center;
   inline-size: 36px;
   block-size: 36px;
-  border: 1px solid var(--color-neutral-200, #e5e5e5);
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, #e5e5e5);
   border-radius: var(--radius-full, 9999px);
   background: color-mix(in srgb, var(--color-neutral-0, #ffffff) 85%, transparent);
   color: var(--color-neutral-800, #262626);
@@ -4433,99 +4435,731 @@
   flex-direction: row-reverse;
   text-align: end;
 }
-.nx-timeline--align-end.nx-timeline--vertical .nx-timeline__header {
-  flex-direction: row-reverse;
+.nx-timeline--align-end.nx-timeline--vertical .nx-timeline__header {
+  flex-direction: row-reverse;
+}
+.nx-timeline--horizontal {
+  flex-direction: row;
+  overflow-x: auto;
+}
+.nx-timeline--horizontal .nx-timeline__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 0 10rem;
+}
+.nx-timeline--horizontal .nx-timeline__marker {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+}
+.nx-timeline--horizontal .nx-timeline__connector {
+  flex: 1 1 auto;
+  block-size: 2px;
+  margin-inline: 4px;
+  background: var(--color-border, #e5e5e5);
+}
+.nx-timeline--horizontal .nx-timeline__item:last-child .nx-timeline__connector {
+  display: none;
+}
+.nx-timeline--horizontal .nx-timeline__content {
+  text-align: center;
+  padding-block-start: 10px;
+}
+.nx-timeline__dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 12px;
+  block-size: 12px;
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-textMuted, #a3a3a3);
+  border: 2px solid var(--color-background, #ffffff);
+  box-shadow: 0 0 0 1px var(--color-border, #e5e5e5);
+  flex: 0 0 auto;
+}
+.nx-timeline__dot--icon {
+  inline-size: 22px;
+  block-size: 22px;
+  background: var(--color-surface, #ffffff);
+  color: var(--color-text, #404040);
+  font-family: var(--typography-fontSans, system-ui, sans-serif);
+  font-size: 12px;
+  line-height: 1;
+  font-weight: var(--typography-weightMedium, 500);
+}
+.nx-timeline__dot--icon svg,
+.nx-timeline__dot--icon img {
+  inline-size: 14px;
+  block-size: 14px;
+  display: block;
+}
+.nx-timeline__dot--success {
+  background: var(--color-success-base, #16a34a);
+}
+.nx-timeline__dot--warning {
+  background: var(--color-warning-base, #d97706);
+}
+.nx-timeline__dot--danger {
+  background: var(--color-danger-base, #dc2626);
+}
+.nx-timeline__dot--info {
+  background: var(--color-brand-500, #6366f1);
+}
+.nx-timeline__header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.nx-timeline__title {
+  font-family: var(--typography-fontSans, system-ui, sans-serif);
+  font-size: var(--typography-sizeMd, 16px);
+  font-weight: var(--typography-weightSemibold, 600);
+  color: var(--color-text, #171717);
+}
+.nx-timeline__timestamp {
+  font-family: var(--typography-fontSans, system-ui, sans-serif);
+  font-size: var(--typography-sizeXs, 12px);
+  color: var(--color-textMuted, #737373);
+}
+.nx-timeline__description {
+  margin-block-start: 4px;
+  font-family: var(--typography-fontSans, system-ui, sans-serif);
+  font-size: var(--typography-sizeSm, 14px);
+  color: var(--color-textMuted, #525252);
+}
+
+/* src/react/ChatBubble.css */
+.nx-chat-bubble {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--spacing-sm, 8px);
+  font-family: var(--typography-fontSans, system-ui, sans-serif);
+  max-inline-size: 100%;
+}
+.nx-chat-bubble--end {
+  flex-direction: row-reverse;
+}
+.nx-chat-bubble__avatar {
+  flex-shrink: 0;
+}
+.nx-chat-bubble--no-avatar {
+  padding-inline-start: 0;
+}
+.nx-chat-bubble__content {
+  display: flex;
+  flex-direction: column;
+  max-inline-size: min(480px, 75%);
+}
+.nx-chat-bubble--end .nx-chat-bubble__content {
+  align-items: flex-end;
+}
+.nx-chat-bubble__name {
+  font-size: var(--typography-sizeXs, 12px);
+  font-weight: var(--typography-weightMedium, 500);
+  color: var(--color-textMuted, #6b7280);
+  margin-bottom: var(--spacing-xs, 4px);
+  padding-inline: var(--spacing-sm, 8px);
+}
+.nx-chat-bubble__bubble {
+  position: relative;
+  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
+  border-radius: var(--radius-lg, 12px);
+  line-height: var(--typography-lineHeightNormal, 1.5);
+  font-size: var(--typography-sizeMd, 16px);
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.nx-chat-bubble__bubble--solid,
+.nx-chat-bubble__bubble--soft {
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, transparent);
+}
+.nx-chat-bubble__bubble--solid,
+.nx-chat-bubble__bubble--soft,
+.nx-chat-bubble__bubble--outline {
+  box-shadow: var(--shadow-sm, none);
+}
+.nx-chat-bubble__bubble--solid {
+  background: var(--color-brand-500, #6366f1);
+  color: var(--color-brand-onAccent, #ffffff);
+}
+.nx-chat-bubble--start .nx-chat-bubble__bubble--solid {
+  background: var(--color-surfaceRaised, #f3f4f6);
+  color: var(--color-text, #111827);
+  backdrop-filter: blur(var(--effects-backdropBlur, 0px));
+  -webkit-backdrop-filter: blur(var(--effects-backdropBlur, 0px));
+}
+.nx-chat-bubble__bubble--soft {
+  background: var(--color-brand-50, #f0f4ff);
+  color: var(--color-brand-700, #4338ca);
+}
+.nx-chat-bubble--start .nx-chat-bubble__bubble--soft {
+  background: var(--color-surfaceRaised, #f3f4f6);
+  color: var(--color-text, #111827);
+  backdrop-filter: blur(var(--effects-backdropBlur, 0px));
+  -webkit-backdrop-filter: blur(var(--effects-backdropBlur, 0px));
+}
+.nx-chat-bubble__bubble--outline {
+  background: transparent;
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, #e5e7eb);
+  color: var(--color-text, #111827);
+}
+.nx-chat-bubble__bubble--ghost {
+  background: transparent;
+  color: var(--color-text, #111827);
+}
+.nx-chat-bubble__bubble--tail-end {
+  border-end-end-radius: 4px;
+}
+.nx-chat-bubble__bubble--tail-start {
+  border-end-start-radius: 4px;
+}
+.nx-chat-bubble__bubble--tail-start::before,
+.nx-chat-bubble__bubble--tail-end::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  inline-size: 12px;
+  block-size: 16px;
+  background: inherit;
+}
+.nx-chat-bubble__bubble--tail-end::before {
+  inset-inline-end: -8px;
+  clip-path: polygon(0 0, 100% 55%, 65% 100%, 0 100%);
+}
+.nx-chat-bubble__bubble--tail-start::before {
+  inset-inline-start: -8px;
+  clip-path: polygon(100% 0, 0 55%, 35% 100%, 100% 100%);
+}
+.nx-chat-bubble__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 4px);
+  margin-top: var(--spacing-xs, 4px);
+  padding-inline: var(--spacing-sm, 8px);
+  font-size: var(--typography-sizeXs, 12px);
+  color: var(--color-textMuted, #6b7280);
+}
+.nx-chat-bubble__status {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-textMuted, #6b7280);
+}
+.nx-chat-bubble__status[data-status=read] {
+  color: var(--color-info-base, #3b82f6);
+}
+.nx-chat-bubble__reactions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-xs, 4px);
+  margin-top: var(--spacing-xs, 4px);
+  padding-inline: var(--spacing-sm, 8px);
+}
+.nx-chat-bubble__reaction {
+  appearance: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: var(--radius-full, 9999px);
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, transparent);
+  background: var(--color-surfaceRaised, #f3f4f6);
+  color: var(--color-text, #111827);
+  font-size: var(--typography-sizeXs, 12px);
+  line-height: 1;
+  transition: background-color var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease), border-color var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease);
+}
+.nx-chat-bubble__reaction:hover {
+  background: var(--color-brand-50, #f0f4ff);
+}
+.nx-chat-bubble__reaction--active {
+  background: var(--color-brand-50, #f0f4ff);
+  border-color: var(--color-brand-500, #6366f1);
+  color: var(--color-brand-700, #4338ca);
+}
+.nx-chat-bubble__reaction:focus-visible {
+  outline: 2px solid var(--color-brand-500, #6366f1);
+  outline-offset: 2px;
+}
+.nx-chat-bubble__add-reaction {
+  appearance: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 24px;
+  block-size: 24px;
+  border-radius: var(--radius-full, 9999px);
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, transparent);
+  background: transparent;
+  color: var(--color-textMuted, #6b7280);
+  transition: background-color var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease), color var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease);
+}
+.nx-chat-bubble__add-reaction:hover {
+  background: var(--color-surfaceRaised, #f3f4f6);
+  color: var(--color-text, #111827);
+}
+.nx-chat-bubble__add-reaction:focus-visible {
+  outline: 2px solid var(--color-brand-500, #6366f1);
+  outline-offset: 2px;
+}
+.nx-chat-bubble__reaction-picker {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 4px;
+  padding: 4px;
+}
+.nx-chat-bubble__reaction-option {
+  appearance: none;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-sm, 6px);
+  font-size: var(--typography-sizeLg, 18px);
+  line-height: 1;
+  padding: 6px;
+  transition: background-color var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease);
+}
+.nx-chat-bubble__reaction-option:hover,
+.nx-chat-bubble__reaction-option:focus-visible {
+  background: var(--color-surfaceRaised, #f3f4f6);
+  outline: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .nx-chat-bubble__reaction,
+  .nx-chat-bubble__add-reaction,
+  .nx-chat-bubble__reaction-option {
+    transition: none;
+  }
+}
+
+/* src/react/ResizablePanel.css */
+.nx-resizable-group {
+  display: flex;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: hidden;
+  color: var(--color-text, #111827);
+  font-family: var(--typography-fontSans, system-ui, sans-serif);
+}
+.nx-resizable-group--horizontal {
+  flex-direction: row;
+}
+.nx-resizable-group--vertical {
+  flex-direction: column;
+}
+.nx-resizable-panel {
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+}
+.nx-resizable-handle {
+  position: relative;
+  flex: 0 0 auto;
+  background: var(--color-border, #e5e7eb);
+  transition: background-color var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease);
+}
+.nx-resizable-handle--horizontal {
+  inline-size: var(--border-widthThin, 1px);
+  cursor: col-resize;
+  touch-action: none;
+}
+.nx-resizable-handle--vertical {
+  block-size: var(--border-widthThin, 1px);
+  cursor: row-resize;
+  touch-action: none;
+}
+.nx-resizable-handle--horizontal::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: -4px;
+  inset-inline-end: -4px;
+}
+.nx-resizable-handle--vertical::before {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: -4px;
+  inset-block-end: -4px;
+}
+.nx-resizable-handle:hover:not(.nx-resizable-handle--disabled),
+.nx-resizable-handle--dragging {
+  background: var(--color-brand-500, #6366f1);
+}
+.nx-resizable-handle:focus-visible {
+  outline: 2px solid var(--color-brand-500, #6366f1);
+  outline-offset: 2px;
+}
+.nx-resizable-handle--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+@media (prefers-reduced-motion: reduce) {
+  .nx-resizable-handle {
+    transition: none;
+  }
+}
+
+/* src/react/Sidebar.css */
+.nx-sidebar {
+  display: flex;
+  flex-direction: column;
+  inline-size: 240px;
+  block-size: 100%;
+  background: var(--color-surface, #ffffff);
+  border-inline-end: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, #e5e7eb);
+  box-shadow: var(--shadow-sm, none);
+  clip-path: inset(0 -32px 0 0);
+  backdrop-filter: blur(var(--effects-backdropBlur, 0px));
+  -webkit-backdrop-filter: blur(var(--effects-backdropBlur, 0px));
+  font-family: var(--typography-fontSans, system-ui, sans-serif);
+  color: var(--color-text, #111827);
+  transition: inline-size var(--motion-durationNormal, 200ms) var(--motion-easeStandard, ease);
+  box-sizing: border-box;
+  overflow-x: hidden;
+}
+.nx-sidebar:dir(rtl) {
+  clip-path: inset(0 0 0 -32px);
+}
+.nx-sidebar--sm {
+  inline-size: 200px;
+}
+.nx-sidebar--sm .nx-sidebar__nav-item {
+  font-size: var(--typography-sizeXs, 12px);
+  padding: 6px 8px;
+}
+.nx-sidebar--sm .nx-sidebar__nav-item-icon {
+  inline-size: 16px;
+  block-size: 16px;
+}
+.nx-sidebar--lg {
+  inline-size: 280px;
+}
+.nx-sidebar--lg .nx-sidebar__nav-item {
+  font-size: var(--typography-sizeMd, 16px);
+  padding: 10px 12px;
+}
+.nx-sidebar--lg .nx-sidebar__nav-item-icon {
+  inline-size: 24px;
+  block-size: 24px;
+}
+.nx-sidebar--collapsed {
+  inline-size: 64px;
+}
+.nx-sidebar__header,
+.nx-sidebar__footer {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-md, 16px);
+  flex-shrink: 0;
+}
+.nx-sidebar__header {
+  border-block-end: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, #e5e7eb);
+}
+.nx-sidebar__footer {
+  border-block-start: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, #e5e7eb);
+  margin-block-start: auto;
+}
+.nx-sidebar__toggle {
+  appearance: none;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 32px;
+  block-size: 32px;
+  border-radius: var(--radius-md, 8px);
+  color: var(--color-textMuted, #6b7280);
+  flex-shrink: 0;
+  transition: background-color var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease);
+}
+.nx-sidebar__toggle:hover {
+  background: var(--color-surfaceRaised, #f3f4f6);
+  color: var(--color-text, #111827);
+}
+.nx-sidebar__toggle:focus-visible {
+  outline: 2px solid var(--color-brand-500, #6366f1);
+  outline-offset: 2px;
+}
+.nx-sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 4px);
+  padding: var(--spacing-sm, 8px);
+  overflow-y: auto;
+  flex: 1;
+}
+.nx-sidebar__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 4px);
+}
+.nx-sidebar__section + .nx-sidebar__section {
+  margin-block-start: var(--spacing-md, 16px);
+}
+.nx-sidebar__section-label {
+  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
+  font-size: var(--typography-sizeXs, 12px);
+  font-weight: var(--typography-weightMedium, 500);
+  color: var(--color-textMuted, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+.nx-sidebar__section-label--hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+.nx-sidebar__nav-item {
+  appearance: none;
+  background: transparent;
+  border: none;
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  font-family: inherit;
+  font-size: var(--typography-sizeSm, 14px);
+  font-weight: var(--typography-weightMedium, 500);
+  line-height: var(--typography-lineHeightTight, 1.2);
+  color: var(--color-textMuted, #6b7280);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm, 8px);
+  padding: 8px 10px;
+  border-radius: var(--radius-md, 8px);
+  white-space: nowrap;
+  transition: background-color var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease), color var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease);
+}
+.nx-sidebar__nav-item:hover:not(.nx-sidebar__nav-item--disabled) {
+  background: var(--color-surfaceRaised, #f3f4f6);
+  color: var(--color-text, #111827);
+}
+.nx-sidebar__nav-item--selected {
+  background: var(--color-brand-50, #f0f4ff);
+  color: var(--color-brand-700, #4338ca);
+  box-shadow: var(--shadow-sm, none);
+}
+.nx-sidebar__nav-item--selected:hover {
+  background: var(--color-brand-50, #f0f4ff);
+}
+.nx-sidebar__nav-item:focus-visible {
+  outline: 2px solid var(--color-brand-500, #6366f1);
+  outline-offset: -2px;
+}
+.nx-sidebar__nav-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.nx-sidebar__nav-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 20px;
+  block-size: 20px;
+}
+.nx-sidebar__nav-item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.nx-sidebar__nav-item--collapsed {
+  justify-content: center;
+  padding-inline: 0;
+}
+.nx-sidebar--collapsed .nx-sidebar__nav-item-label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  .nx-sidebar,
+  .nx-sidebar__toggle,
+  .nx-sidebar__nav-item {
+    transition: none;
+  }
+}
+
+/* src/react/SpeedDial.css */
+.nx-speed-dial {
+  display: inline-flex;
+}
+.nx-speed-dial__fab {
+  appearance: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full, 9999px);
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, transparent);
+  background: var(--color-brand-500, #6366f1);
+  color: var(--color-brand-onAccent, #ffffff);
+  box-shadow: var(--shadow-lg, 0 10px 24px rgba(0, 0, 0, 0.18));
+  transition:
+    transform var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease),
+    background-color var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease),
+    box-shadow var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease);
+}
+.nx-speed-dial__fab:hover {
+  background: var(--color-brand-600, #4f46e5);
+}
+.nx-speed-dial__fab:active {
+  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
+}
+.nx-speed-dial__fab:focus-visible {
+  outline: 2px solid var(--color-brand-700, #4338ca);
+  outline-offset: 2px;
+}
+.nx-speed-dial__fab--open {
+  transform: rotate(45deg);
+}
+.nx-speed-dial__fab--xs {
+  inline-size: 32px;
+  block-size: 32px;
+}
+.nx-speed-dial__fab--sm {
+  inline-size: 40px;
+  block-size: 40px;
+}
+.nx-speed-dial__fab--md {
+  inline-size: 56px;
+  block-size: 56px;
 }
-.nx-timeline--horizontal {
-  flex-direction: row;
-  overflow-x: auto;
+.nx-speed-dial__fab--lg {
+  inline-size: 68px;
+  block-size: 68px;
 }
-.nx-timeline--horizontal .nx-timeline__item {
+.nx-speed-dial__fab--xl {
+  inline-size: 80px;
+  block-size: 80px;
+}
+.nx-speed-dial__list {
+  z-index: 1050;
   display: flex;
+  gap: var(--spacing-md, 16px);
+  padding: 0;
+  margin: 0;
+  animation: nx-speed-dial-in var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease);
+}
+.nx-speed-dial__list--vertical {
   flex-direction: column;
   align-items: center;
-  flex: 1 0 10rem;
 }
-.nx-timeline--horizontal .nx-timeline__marker {
-  display: flex;
+.nx-speed-dial__list--horizontal {
+  flex-direction: row;
   align-items: center;
-  inline-size: 100%;
 }
-.nx-timeline--horizontal .nx-timeline__connector {
-  flex: 1 1 auto;
-  block-size: 2px;
-  margin-inline: 4px;
-  background: var(--color-border, #e5e5e5);
+@keyframes nx-speed-dial-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
-.nx-timeline--horizontal .nx-timeline__item:last-child .nx-timeline__connector {
-  display: none;
+.nx-speed-dial__action-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
 }
-.nx-timeline--horizontal .nx-timeline__content {
-  text-align: center;
-  padding-block-start: 10px;
+.nx-speed-dial__list--vertical .nx-speed-dial__action-wrapper {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
 }
-.nx-timeline__dot {
+.nx-speed-dial__list--horizontal .nx-speed-dial__action-wrapper {
+  flex-direction: column-reverse;
+}
+.nx-speed-dial__action {
+  appearance: none;
+  cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  inline-size: 12px;
-  block-size: 12px;
   border-radius: var(--radius-full, 9999px);
-  background: var(--color-textMuted, #a3a3a3);
-  border: 2px solid var(--color-background, #ffffff);
-  box-shadow: 0 0 0 1px var(--color-border, #e5e5e5);
-  flex: 0 0 auto;
-}
-.nx-timeline__dot--icon {
-  inline-size: 22px;
-  block-size: 22px;
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, transparent);
   background: var(--color-surface, #ffffff);
-  color: var(--color-text, #404040);
-  font-family: var(--typography-fontSans, system-ui, sans-serif);
-  font-size: 12px;
-  line-height: 1;
-  font-weight: var(--typography-weightMedium, 500);
+  color: var(--color-text, #111827);
+  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
+  transition:
+    background-color var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease),
+    box-shadow var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease),
+    transform var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease);
 }
-.nx-timeline__dot--icon svg,
-.nx-timeline__dot--icon img {
-  inline-size: 14px;
-  block-size: 14px;
-  display: block;
+.nx-speed-dial__action:hover:not(.nx-speed-dial__action--disabled),
+.nx-speed-dial__action:focus-visible {
+  background: var(--color-brand-50, #f0f4ff);
+  color: var(--color-brand-700, #4338ca);
 }
-.nx-timeline__dot--success {
-  background: var(--color-success-base, #16a34a);
+.nx-speed-dial__action:active:not(.nx-speed-dial__action--disabled) {
+  box-shadow: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.1));
+  transform: translate(1px, 1px);
 }
-.nx-timeline__dot--warning {
-  background: var(--color-warning-base, #d97706);
+.nx-speed-dial__action:focus-visible {
+  outline: 2px solid var(--color-brand-500, #6366f1);
+  outline-offset: 2px;
 }
-.nx-timeline__dot--danger {
-  background: var(--color-danger-base, #dc2626);
+.nx-speed-dial__action--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
-.nx-timeline__dot--info {
-  background: var(--color-brand-500, #6366f1);
+.nx-speed-dial__action--xs {
+  inline-size: 26px;
+  block-size: 26px;
 }
-.nx-timeline__header {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  flex-wrap: wrap;
+.nx-speed-dial__action--sm {
+  inline-size: 32px;
+  block-size: 32px;
 }
-.nx-timeline__title {
-  font-family: var(--typography-fontSans, system-ui, sans-serif);
-  font-size: var(--typography-sizeMd, 16px);
-  font-weight: var(--typography-weightSemibold, 600);
-  color: var(--color-text, #171717);
+.nx-speed-dial__action--md {
+  inline-size: 40px;
+  block-size: 40px;
 }
-.nx-timeline__timestamp {
-  font-family: var(--typography-fontSans, system-ui, sans-serif);
-  font-size: var(--typography-sizeXs, 12px);
-  color: var(--color-textMuted, #737373);
+.nx-speed-dial__action--lg {
+  inline-size: 48px;
+  block-size: 48px;
 }
-.nx-timeline__description {
-  margin-block-start: 4px;
+.nx-speed-dial__action--xl {
+  inline-size: 56px;
+  block-size: 56px;
+}
+.nx-speed-dial__action-label {
+  white-space: nowrap;
+  padding: 4px 10px;
+  border-radius: var(--radius-sm, 6px);
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, transparent);
+  background: var(--color-surfaceRaised, #f3f4f6);
+  color: var(--color-text, #111827);
   font-family: var(--typography-fontSans, system-ui, sans-serif);
   font-size: var(--typography-sizeSm, 14px);
-  color: var(--color-textMuted, #525252);
+  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
+}
+.nx-speed-dial__list--vertical .nx-speed-dial__action-label {
+  margin-inline-end: var(--spacing-sm, 8px);
+}
+.nx-speed-dial__list--horizontal .nx-speed-dial__action-label {
+  margin-block-end: var(--spacing-sm, 8px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .nx-speed-dial__fab,
+  .nx-speed-dial__list,
+  .nx-speed-dial__action {
+    transition: none;
+    animation-duration: 0.01ms;
+  }
 }
 
 /* src/react/CommandPalette.css */
@@ -5696,4 +6330,317 @@
   color: var(--color-textMuted, #6b7280);
   font-weight: var(--typography-weightNormal, 400);
 }
+
+/* src/react/CodeBlock.css */
+.nx-code-block {
+  width: 100%;
+  position: relative;
+  border-radius: var(--radius-md);
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, #e5e7eb);
+  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
+  background: var(--color-surfaceRaised, var(--color-surface));
+  color: var(--color-text);
+  font-family: var(--typography-fontMono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+  font-size: var(--typography-sizeSm, 0.875rem);
+  line-height: var(--typography-lineHeightNormal, 1.6);
+  overflow: hidden;
+  transition: border-color var(--motion-durationFast, 150ms) var(--motion-easeStandard, ease);
+}
+.nx-code-block--sm {
+  font-size: var(--typography-sizeXs, 0.75rem);
+}
+.nx-code-block--lg {
+  font-size: var(--typography-sizeMd, 1rem);
+}
+.nx-code-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-xs) var(--spacing-md);
+  border-bottom: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, #e5e7eb);
+  background: var(--color-surface);
+}
+.nx-code-block__filename {
+  font-size: var(--typography-sizeXs, 0.75rem);
+  color: var(--color-textMuted, var(--color-text));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nx-code-block__copy-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-textMuted, var(--color-text));
+  cursor: pointer;
+  transition: background var(--motion-durationFast, 150ms) var(--motion-easeStandard, ease);
+}
+.nx-code-block__copy-button:hover {
+  background: var(--color-surfaceRaised, #f3f4f6);
+}
+.nx-code-block__copy-button:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: 2px;
+}
+.nx-code-block__pre {
+  margin: 0;
+  padding: var(--spacing-md);
+  overflow-x: auto;
+}
+.nx-code-block--wrap .nx-code-block__pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: hidden;
+}
+.nx-code-block__code {
+  display: block;
+}
+.nx-code-block__line {
+  display: block;
+}
+.nx-code-block__line--highlighted {
+  background: color-mix(in srgb, var(--color-brand-500) 12%, transparent);
+  margin-inline: calc(var(--spacing-md) * -1);
+  padding-inline: var(--spacing-md);
+}
+.nx-code-block__line-number {
+  display: inline-block;
+  inline-size: 2.25em;
+  margin-inline-end: var(--spacing-sm);
+  color: var(--color-textMuted, var(--color-text));
+  opacity: 0.5;
+  text-align: right;
+  user-select: none;
+}
+.nx-code-token--keyword {
+  color: var(--nx-code-keyword, #c678dd);
+}
+.nx-code-token--string {
+  color: var(--nx-code-string, #98c379);
+}
+.nx-code-token--comment {
+  color: var(--nx-code-comment, #7f848e);
+  font-style: italic;
+}
+.nx-code-token--number {
+  color: var(--nx-code-number, #d19a66);
+}
+.nx-code-token--function {
+  color: var(--nx-code-function, #61afef);
+}
+.nx-code-token--builtin {
+  color: var(--nx-code-builtin, #56b6c2);
+}
+.nx-code-token--tag {
+  color: var(--nx-code-tag, #e06c75);
+}
+.nx-code-token--attrName {
+  color: var(--nx-code-attr, #d19a66);
+}
+.nx-code-token--property {
+  color: var(--nx-code-property, #e5c07b);
+}
+.nx-code-token--selector {
+  color: var(--nx-code-selector, #e06c75);
+}
+.nx-code-token--atrule {
+  color: var(--nx-code-atrule, #c678dd);
+}
+.nx-code-token--variable {
+  color: var(--nx-code-variable, #e06c75);
+}
+.nx-code-token--boolean {
+  color: var(--nx-code-boolean, #d19a66);
+}
+.nx-code-token--regex {
+  color: var(--nx-code-regex, #56b6c2);
+}
+.nx-code-token--decorator {
+  color: var(--nx-code-decorator, #e5c07b);
+}
+.nx-code-token--pseudo {
+  color: var(--nx-code-pseudo, #56b6c2);
+}
+.nx-code-token--punctuation {
+  color: var(--nx-code-punctuation, var(--color-textMuted, currentColor));
+}
+.nx-code-token--plain {
+  color: inherit;
+}
+
+/* src/react/RichTextEditor.css */
+.nx-rich-text {
+  width: 100%;
+  border-radius: var(--radius-md);
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, #e5e7eb);
+  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
+  background: var(--color-surface);
+  color: var(--color-text);
+  overflow: hidden;
+  transition: border-color var(--motion-durationFast, 150ms) var(--motion-easeStandard, ease);
+}
+.nx-rich-text--sm {
+  font-size: var(--typography-sizeSm, 0.875rem);
+}
+.nx-rich-text--lg {
+  font-size: var(--typography-sizeLg, 1.125rem);
+}
+.nx-rich-text--disabled {
+  opacity: 0.6;
+}
+.nx-rich-text--readonly {
+  background: var(--color-surfaceRaised, var(--color-surface));
+}
+.nx-rich-text__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-bottom: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, #e5e7eb);
+  background: var(--color-surfaceRaised, var(--color-surface));
+}
+.nx-rich-text__toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text);
+  cursor: pointer;
+  font-size: var(--typography-sizeSm, 0.875rem);
+  transition: background var(--motion-durationFast, 150ms) var(--motion-easeStandard, ease);
+}
+.nx-rich-text__toolbar-button:hover:not(:disabled) {
+  background: var(--color-brand-50, #f0f4ff);
+}
+.nx-rich-text__toolbar-button:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: 2px;
+}
+.nx-rich-text__toolbar-button[data-active=true] {
+  background: color-mix(in srgb, var(--color-brand-500) 16%, transparent);
+  color: var(--color-brand-500);
+}
+.nx-rich-text__toolbar-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.nx-rich-text__glyph {
+  display: inline-flex;
+  font-size: 0.8em;
+  line-height: 1;
+}
+.nx-rich-text__content {
+  min-height: 8em;
+  padding: var(--spacing-md);
+  outline: none;
+  line-height: var(--typography-lineHeightNormal, 1.6);
+}
+.nx-rich-text__content:empty::before {
+  content: attr(data-placeholder);
+  color: var(--color-textMuted, var(--color-text));
+  opacity: 0.5;
+  pointer-events: none;
+}
+.nx-rich-text__content h1,
+.nx-rich-text__content h2,
+.nx-rich-text__content h3 {
+  margin: 0.6em 0 0.3em;
+  line-height: 1.25;
+}
+.nx-rich-text__content p {
+  margin: 0 0 0.6em;
+}
+.nx-rich-text__content p:last-child {
+  margin-bottom: 0;
+}
+.nx-rich-text__content blockquote {
+  margin: 0 0 0.6em;
+  padding-inline-start: var(--spacing-md);
+  border-inline-start: var(--border-widthThick, 3px) var(--border-style, solid) var(--color-border, #e5e7eb);
+  color: var(--color-textMuted, var(--color-text));
+}
+.nx-rich-text__content ul,
+.nx-rich-text__content ol {
+  margin: 0 0 0.6em;
+  padding-inline-start: 1.5em;
+}
+.nx-rich-text__content code {
+  font-family: var(--typography-fontMono, ui-monospace, monospace);
+  background: var(--color-surfaceRaised, var(--color-surface));
+  border-radius: var(--radius-sm);
+  padding: 0.1em 0.35em;
+}
+.nx-rich-text__content a {
+  color: var(--color-brand-500);
+  text-decoration: underline;
+}
+.nx-rich-text__link-popover {
+  padding: var(--spacing-sm);
+}
+.nx-rich-text__link-input {
+  width: 16rem;
+  max-width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, #e5e7eb);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: var(--typography-sizeSm, 0.875rem);
+}
+.nx-rich-text__link-input:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: 2px;
+}
+.nx-rich-text__color-popover {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+}
+.nx-rich-text__color-input {
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, #e5e7eb);
+  border-radius: var(--radius-sm);
+  background: none;
+  cursor: pointer;
+}
+.nx-rich-text__color-input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+.nx-rich-text__color-input::-webkit-color-swatch {
+  border: none;
+  border-radius: var(--radius-sm);
+}
+.nx-rich-text__color-input::-moz-color-swatch {
+  border: none;
+  border-radius: var(--radius-sm);
+}
+.nx-rich-text__color-clear {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, #e5e7eb);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: var(--typography-sizeXs, 0.75rem);
+  cursor: pointer;
+}
+.nx-rich-text__color-clear:hover {
+  background: var(--color-surfaceRaised, #f3f4f6);
+}
+.nx-rich-text__color-clear:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: 2px;
+}
 /*# sourceMappingURL=index.css.map */