@godxjp/ui 23.2.1 → 23.4.0

package/dist/styles/layout.css

@@ -1708,3 +1708,199 @@
     column-gap: var(--space-inline-xl);
   }
 }
+
+@layer components {
+
+  .ui-actions {
+    display: flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--actions-gap);
+    border-radius: var(--actions-radius);
+  }
+
+  .ui-actions[data-variant="filled"],
+  .ui-actions[data-variant="outlined"] {
+    padding-block: var(--actions-padding-block);
+    padding-inline: var(--actions-padding-inline);
+  }
+
+  .ui-actions[data-variant="filled"] {
+    background: var(--actions-filled-background, hsl(var(--muted)));
+  }
+
+  .ui-actions[data-variant="outlined"] {
+    border: var(--actions-outlined-border, var(--stroke-hairline) solid hsl(var(--border)));
+  }
+
+  .ui-actions-feedback {
+    display: flex;
+    align-items: center;
+    gap: var(--actions-gap);
+  }
+
+  .ui-actions-feedback [data-pressed] {
+    color: hsl(var(--primary));
+  }
+
+  @keyframes ui-actions-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes ui-actions-fade-in-inline {
+    from {
+      opacity: 0;
+      translate: calc(-1 * var(--actions-fade-offset-inline)) 0;
+    }
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  [dir="rtl"] .ui-actions[data-fade-in-inline] {
+    --actions-fade-offset-inline: calc(-1 * var(--space-2));
+  }
+
+  .ui-actions[data-fade-in] {
+    animation: ui-actions-fade-in var(--duration-base) var(--ease-standard, ease) both;
+  }
+
+  .ui-actions[data-fade-in-inline] {
+    animation: ui-actions-fade-in-inline var(--duration-base) var(--ease-standard, ease) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-actions[data-fade-in],
+    .ui-actions[data-fade-in-inline] {
+      animation: none;
+    }
+  }
+}
+
+@layer components {
+
+  .ui-draggable-panel {
+    position: fixed;
+    z-index: var(--overlay-z-index);
+    display: flex;
+    flex-direction: column;
+    inline-size: var(--draggable-panel-width);
+    max-inline-size: calc(100% - var(--draggable-panel-inset) - var(--draggable-panel-inset));
+    max-block-size: var(--draggable-panel-max-block-size);
+    border: var(--draggable-panel-border-width) solid hsl(var(--border));
+    border-radius: var(--draggable-panel-radius);
+    background-color: hsl(var(--background));
+    box-shadow: var(--draggable-panel-shadow);
+    overflow: hidden;
+    translate: calc(var(--draggable-panel-offset-x) * 1px)
+      calc(var(--draggable-panel-offset-y) * 1px);
+    transition: translate var(--duration-fast) var(--ease-standard);
+  }
+
+  .ui-draggable-panel[data-width="sm"] {
+    inline-size: var(--draggable-panel-width-sm);
+  }
+
+  .ui-draggable-panel[data-width="lg"] {
+    inline-size: var(--draggable-panel-width-lg);
+  }
+
+  .ui-draggable-panel[data-placement^="top"] {
+    inset-block-start: var(--draggable-panel-inset);
+  }
+
+  .ui-draggable-panel[data-placement^="bottom"] {
+    inset-block-end: var(--draggable-panel-inset);
+  }
+
+  .ui-draggable-panel[data-placement$="start"] {
+    inset-inline-start: var(--draggable-panel-inset);
+  }
+
+  .ui-draggable-panel[data-placement$="end"] {
+    inset-inline-end: var(--draggable-panel-inset);
+  }
+
+  .ui-draggable-panel[data-dragging] {
+    transition: none;
+    user-select: none;
+  }
+
+  .ui-draggable-panel-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--draggable-panel-bar-gap);
+    padding: var(--draggable-panel-bar-padding);
+    border-block-end: var(--draggable-panel-border-width) solid hsl(var(--border));
+    background-color: hsl(var(--muted) / 0.4);
+  }
+
+  .ui-draggable-panel-handle {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    color: hsl(var(--muted-foreground));
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .ui-draggable-panel[data-dragging] .ui-draggable-panel-handle {
+    cursor: grabbing;
+  }
+
+  .ui-draggable-panel-handle[aria-disabled="true"] {
+    cursor: default;
+  }
+
+  .ui-draggable-panel-handle-icon,
+  .ui-draggable-panel-close-icon {
+    inline-size: var(--draggable-panel-handle-size);
+    block-size: var(--draggable-panel-handle-size);
+  }
+
+  .ui-draggable-panel-title {
+    min-inline-size: 0;
+    flex: 1;
+    overflow: hidden;
+    font-weight: var(--font-weight-medium);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-draggable-panel-extra {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--draggable-panel-bar-gap);
+  }
+
+  .ui-draggable-panel-close {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-draggable-panel-body {
+    min-block-size: 0;
+    flex: 1;
+    padding: var(--draggable-panel-body-padding);
+    overflow-y: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-draggable-panel {
+    transition: none;
+  }
+}

package/dist/styles/navigation-layout.css

@@ -892,3 +892,142 @@
     }
   }
 }
+
+@layer components {
+
+  .ui-conversations {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    gap: var(--conversations-gap);
+  }
+
+  .ui-conversations-list {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    gap: var(--conversations-list-gap);
+    list-style: none;
+  }
+
+  .ui-conversations-item {
+    position: relative;
+    display: flex;
+    min-inline-size: 0;
+    align-items: center;
+  }
+
+  .ui-conversations-row {
+    min-inline-size: 0;
+    height: var(--conversations-item-height);
+    flex: 1 1 auto;
+    gap: var(--conversations-item-gap);
+    padding-inline: var(--conversations-item-padding-inline);
+    border-radius: var(--conversations-item-radius);
+    color: var(--conversations-item-color, hsl(var(--muted-foreground)));
+    font-size: var(--conversations-item-font-size);
+  }
+
+  .ui-conversations-item[data-active="true"] .ui-conversations-row {
+    background: var(--conversations-item-active-background, hsl(var(--accent)));
+    color: var(--conversations-item-active-color, hsl(var(--foreground)));
+    font-weight: var(--conversations-item-active-font-weight);
+  }
+
+  .ui-conversations-row > .ui-text {
+    min-inline-size: 0;
+  }
+
+  .ui-conversations-line {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--conversations-line-gap);
+    min-inline-size: 0;
+  }
+
+  .ui-conversations-line > .ui-text {
+    min-inline-size: 0;
+  }
+
+  .ui-conversations-icon {
+    display: grid;
+    inline-size: var(--conversations-icon-size);
+    block-size: var(--conversations-icon-size);
+    flex: 0 0 auto;
+    line-height: 0;
+    place-items: center;
+  }
+
+  .ui-conversations-icon svg {
+    inline-size: var(--conversations-icon-size);
+    block-size: var(--conversations-icon-size);
+  }
+
+  .ui-conversations-menu-trigger {
+    flex: 0 0 auto;
+    opacity: 0;
+  }
+
+  .ui-conversations-item:hover .ui-conversations-menu-trigger,
+  .ui-conversations-item:focus-within .ui-conversations-menu-trigger,
+  .ui-conversations-item[data-active="true"] .ui-conversations-menu-trigger,
+  .ui-conversations-menu-trigger[data-state="open"] {
+    opacity: 1;
+  }
+
+  @media (hover: none) {
+    .ui-conversations-menu-trigger {
+      opacity: 1;
+    }
+  }
+
+  .ui-conversations-group {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    gap: var(--conversations-group-gap);
+  }
+
+  .ui-conversations-group-label {
+    padding-inline: var(--conversations-group-padding-inline);
+  }
+
+  .ui-conversations-group-trigger {
+    min-inline-size: 0;
+    gap: var(--conversations-item-gap);
+    padding-inline: var(--conversations-group-padding-inline);
+  }
+
+  .ui-conversations-group-chevron {
+    inline-size: var(--conversations-group-chevron-size);
+    block-size: var(--conversations-group-chevron-size);
+    flex: 0 0 auto;
+    transform: rotate(-90deg);
+  }
+
+  [dir="rtl"] .ui-conversations-group-chevron {
+    transform: rotate(90deg);
+  }
+
+  .ui-conversations-group-chevron[data-expanded="true"],
+  [dir="rtl"] .ui-conversations-group-chevron[data-expanded="true"] {
+    transform: rotate(0deg);
+  }
+
+  .ui-conversations-rule {
+    list-style: none;
+  }
+
+  .ui-conversations-separator {
+    margin-block: var(--conversations-separator-space-block);
+  }
+
+  .ui-conversations-separator[data-dashed="true"] {
+    height: 0;
+    border-block-start: var(--separator-rule-size) dashed
+      hsl(var(--separator-rule-color, var(--border)));
+    background: transparent;
+  }
+}

package/dist/styles/text-layout.css

@@ -150,3 +150,159 @@
     font-size: var(--heading-h4);
   }
 }
+
+@layer components {
+
+  [data-slot="heading"][data-level="5"] {
+    font-size: var(--heading-h5);
+  }
+
+  [data-slot="text"][data-disabled],
+  [data-slot="heading"][data-disabled] {
+    color: hsl(var(--text-disabled));
+    cursor: not-allowed;
+    user-select: none;
+  }
+
+  [data-slot="text"][data-disabled][data-link]:hover,
+  [data-slot="text"][data-disabled][data-link]:active {
+    color: hsl(var(--text-disabled));
+  }
+
+  [data-slot="text"] mark,
+  [data-slot="heading"] mark {
+    padding: 0;
+    background-color: var(--text-mark-background);
+    color: var(--text-mark-foreground);
+  }
+  [data-slot="text"] u,
+  [data-slot="heading"] u {
+    text-decoration-line: underline;
+    text-decoration-skip-ink: auto;
+  }
+  [data-slot="text"] del,
+  [data-slot="heading"] del {
+    text-decoration-line: line-through;
+  }
+  [data-slot="text"] strong,
+  [data-slot="heading"] strong {
+    font-weight: var(--font-weight-bold);
+  }
+  [data-slot="text"] code,
+  [data-slot="text"] kbd,
+  [data-slot="heading"] code,
+  [data-slot="heading"] kbd {
+    background: hsl(var(--muted));
+    border: var(--stroke-hairline) solid hsl(var(--border));
+    border-radius: var(--prose-code-radius);
+    padding-inline: var(--prose-code-space-inline);
+    font-family: var(--font-family-mono, ui-monospace, "SFMono-Regular", monospace);
+    font-size: var(--prose-code-font-size);
+  }
+
+  [data-slot="text"] kbd,
+  [data-slot="heading"] kbd {
+    border-block-end-width: var(--stroke-md);
+  }
+
+  .ui-typography-actions {
+    display: inline;
+    margin-inline-start: var(--text-action-gap);
+  }
+  .ui-typography-actions[data-placement="start"] {
+    margin-inline-start: 0;
+    margin-inline-end: var(--text-action-gap);
+  }
+
+  .ui-typography-action {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--text-action-gap);
+    margin-inline-start: var(--text-action-gap);
+    border: 0;
+    background: none;
+    padding: 0;
+    color: var(--text-action-color);
+    font: inherit;
+    cursor: pointer;
+    vertical-align: baseline;
+  }
+  .ui-typography-actions[data-placement="start"] > .ui-typography-action:first-child,
+  .ui-typography-actions > .ui-typography-action:first-child {
+    margin-inline-start: 0;
+  }
+  .ui-typography-action:hover,
+  .ui-typography-action:focus-visible {
+    color: var(--text-action-color-hover);
+  }
+
+  .ui-typography-action[data-copied] {
+    color: hsl(var(--text-success));
+  }
+  .ui-typography-icon {
+    inline-size: var(--text-action-size);
+    block-size: var(--text-action-size);
+  }
+  .ui-typography-icon-spin {
+    animation: ui-typography-spin var(--duration-loop) linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-typography-icon-spin {
+      animation: none;
+    }
+  }
+
+  .ui-typography-content[data-clamp] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--text-clamp, 2);
+    line-clamp: var(--text-clamp, 2);
+    overflow: hidden;
+    min-width: 0;
+  }
+  .ui-typography-content[data-truncate] {
+    display: inline-block;
+    max-inline-size: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: bottom;
+  }
+
+  [data-slot="text"][data-ellipsis][data-truncate] {
+    display: inline-block;
+    max-inline-size: 100%;
+    vertical-align: bottom;
+  }
+
+  .ui-typography-edit {
+    position: relative;
+  }
+  .ui-typography-edit-textarea {
+    font-size: inherit;
+    line-height: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+  }
+  .ui-typography-edit-confirm {
+    position: absolute;
+    inset-inline-end: var(--space-2);
+    inset-block-end: var(--space-1);
+    color: hsl(var(--muted-foreground));
+    pointer-events: none;
+  }
+
+  .ui-typography {
+    color: hsl(var(--foreground));
+    overflow-wrap: break-word;
+  }
+}
+
+@layer components {
+  @keyframes ui-typography-spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}

package/dist/tokens/axes.css

@@ -66,3 +66,8 @@
   --focus-field-shadow: 0 0 0 var(--focus-ring-glow-width)
     hsl(var(--focus-ring-glow-color) / var(--focus-ring-glow-alpha));
 }
+
+:root[data-focus-outline="off"] {
+  --focus-outline: 0;
+  --focus-field-shadow: none;
+}

package/dist/tokens/base.css

@@ -36,3 +36,10 @@
 @import "./components/activity.css";
 @import "./components/text.css";
 @import "./components/tree.css";
+@import "./components/thought-chain.css";
+@import "./components/welcome.css";
+@import "./components/actions.css";
+@import "./components/attachments.css";
+@import "./components/conversations.css";
+@import "./components/float-button.css";
+@import "./components/draggable-panel.css";

package/dist/tokens/components/actions.css

@@ -0,0 +1,14 @@
+
+:root {
+
+  --actions-gap: var(--space-1);
+
+  --actions-padding-block: var(--space-1);
+  --actions-padding-inline: var(--space-1);
+  --actions-radius: var(--radius);
+
+  --actions-filled-background: initial;
+  --actions-outlined-border: initial;
+
+  --actions-fade-offset-inline: var(--space-2);
+}

package/dist/tokens/components/attachments.css

@@ -0,0 +1,15 @@
+
+:root {
+  --attachments-gap: var(--space-2);
+  --attachments-card-size: var(--upload-tile-size);
+  --attachments-card-radius: var(--upload-tile-radius);
+  --attachments-card-gap: var(--upload-tile-space-gap);
+  --attachments-placeholder-space-inset: var(--upload-dropzone-space-inset);
+  --attachments-placeholder-radius: var(--upload-dropzone-radius);
+  --attachments-placeholder-icon-size: var(--upload-dropzone-icon-size);
+  --attachments-placeholder-title-font-size: var(--font-size-sm);
+  --attachments-placeholder-description-font-size: var(--upload-dropzone-meta-font-size);
+  --attachments-placeholder-gap: var(--space-2);
+  --attachments-drop-overlay-background: initial;
+  --attachments-remove-icon-size: var(--upload-remove-icon-size);
+}

package/dist/tokens/components/conversations.css

@@ -0,0 +1,28 @@
+
+:root {
+
+  --conversations-gap: var(--space-2);
+
+  --conversations-list-gap: var(--space-1);
+
+  --conversations-item-height: var(--band-height-md);
+  --conversations-item-gap: var(--space-inline-sm);
+  --conversations-item-padding-inline: var(--space-inline-sm);
+  --conversations-item-radius: var(--radius);
+  --conversations-item-font-size: var(--font-size-xs);
+
+  --conversations-item-color: initial;
+  --conversations-item-active-background: initial;
+  --conversations-item-active-color: initial;
+  --conversations-item-active-font-weight: var(--font-weight-medium);
+
+  --conversations-icon-size: var(--icon-size-md);
+
+  --conversations-line-gap: var(--space-stack-xs);
+
+  --conversations-group-gap: var(--space-1);
+  --conversations-group-padding-inline: var(--space-inline-sm);
+  --conversations-group-chevron-size: var(--icon-size-sm);
+
+  --conversations-separator-space-block: var(--space-1);
+}

package/dist/tokens/components/draggable-panel.css

@@ -0,0 +1,25 @@
+
+:root {
+
+  --draggable-panel-inset: var(--space-6);
+
+  --draggable-panel-offset-x: 0;
+  --draggable-panel-offset-y: 0;
+
+  --draggable-panel-step-offset: var(--space-2);
+  --draggable-panel-step-offset-lg: var(--space-10);
+
+  --draggable-panel-width-sm: 18rem;
+  --draggable-panel-width: 22rem;
+  --draggable-panel-width-lg: 28rem;
+  --draggable-panel-max-block-size: 70vh;
+
+  --draggable-panel-radius: var(--radius-lg);
+  --draggable-panel-shadow: var(--shadow-lg);
+  --draggable-panel-border-width: var(--stroke-hairline);
+
+  --draggable-panel-bar-padding: var(--space-2) var(--space-3);
+  --draggable-panel-bar-gap: var(--space-2);
+  --draggable-panel-body-padding: var(--space-4);
+  --draggable-panel-handle-size: var(--control-affix-icon-size);
+}

package/dist/tokens/components/float-button.css

@@ -0,0 +1,39 @@
+
+
+:root {
+
+  --float-button-offset-block-end: var(--space-stack-xl);
+  --float-button-offset-inline-end: var(--space-6);
+
+  --float-button-size: var(--control-height-lg);
+
+  --float-button-min-block-size: var(--control-height-lg);
+  --float-button-padding-block: var(--space-2);
+  --float-button-padding-inline: var(--space-1);
+
+  --float-button-icon-size: var(--icon-size-md);
+
+  --float-button-content-font-size: var(--font-size-2xs);
+  --float-button-content-line-height: var(--line-height-tight);
+
+  --float-button-shadow: var(--shadow-lg);
+
+  --float-button-group-gap: var(--space-stack-md);
+  --float-button-group-radius: var(--radius-lg);
+
+  --float-button-badge-background: initial;
+  --float-button-badge-foreground: hsl(var(--destructive-foreground));
+  --float-button-badge-size: var(--space-4);
+  --float-button-badge-padding-inline: var(--space-1);
+  --float-button-badge-font-size: var(--font-size-2xs);
+  --float-button-badge-inset-block-start: calc(var(--space-1) * -1);
+  --float-button-badge-inset-inline-end: calc(var(--space-1) * -1);
+  --float-button-badge-dot-size: var(--space-2);
+
+  --float-button-progress-offset: 0turn;
+  --float-button-progress-width: var(--space-1);
+  --float-button-progress-color: hsl(var(--primary));
+  --float-button-progress-track-color: hsl(var(--border));
+
+  --float-button-motion-translate: var(--float-button-size);
+}

package/dist/tokens/components/text.css

@@ -5,3 +5,16 @@
 
   --text-link-underline-width: auto;
 }
+
+:root {
+
+  --text-action-gap: var(--space-1);
+
+  --text-action-color: hsl(var(--primary));
+  --text-action-color-hover: hsl(var(--primary-hover));
+
+  --text-action-size: 1em;
+
+  --text-mark-background: hsl(var(--warning));
+  --text-mark-foreground: hsl(var(--warning-foreground));
+}

package/dist/tokens/components/thought-chain.css

@@ -0,0 +1,31 @@
+
+:root {
+
+  --thought-chain-gap: var(--space-4);
+  --thought-chain-node-gap: var(--space-3);
+
+  --thought-chain-body-gap: var(--space-1);
+
+  --thought-chain-icon-size: var(--band-height-sm);
+  --thought-chain-icon-font-size: var(--font-size-xs);
+  --thought-chain-icon-radius: var(--radius-pill);
+
+  --thought-chain-icon-background: initial;
+  --thought-chain-icon-color: initial;
+
+  --thought-chain-icon-success-color: initial;
+  --thought-chain-icon-error-color: initial;
+
+  --thought-chain-line-width: var(--stroke-hairline);
+  --thought-chain-line-color: initial;
+
+  --thought-chain-chevron-size: var(--icon-size-sm);
+  --thought-chain-content-space-block: var(--space-2);
+
+  --thought-chain-item-gap: var(--space-2);
+  --thought-chain-item-padding-block: var(--space-2);
+  --thought-chain-item-padding-inline: var(--space-3);
+  --thought-chain-item-radius: var(--radius);
+  --thought-chain-item-solid-background: initial;
+  --thought-chain-item-outlined-border: initial;
+}