willa-workspace 0.0.3-alpha.2739b3e

package/example/src/styles.css

@@ -0,0 +1,919 @@
+:root {
+  color: #111827;
+  background: #f7f8fb;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+
+:root[data-wk-theme="dark"] {
+  color: #f8fafc;
+  background: #0c111d;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+button,
+a,
+input,
+textarea,
+select,
+[role="button"],
+[tabindex] {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.docs-app {
+  min-height: 100vh;
+  --docs-sidebar-scrollbar-thumb: var(
+    --willa-scrollbar-thumb,
+    color-mix(in srgb, var(--willa-text-soft) 56%, transparent)
+  );
+}
+
+.docs-app .willa-app-shell-layout {
+  min-height: 100vh;
+}
+
+.docs-app .willa-app-shell-sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  border-right: 1px solid rgba(15, 23, 42, 0.1);
+  background: #ffffff;
+  padding: 22px 14px;
+  overflow-y: auto;
+}
+
+@media (pointer: fine) {
+  .docs-app .willa-app-shell-sidebar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--docs-sidebar-scrollbar-thumb) transparent;
+    -ms-overflow-style: auto;
+  }
+
+  .docs-app .willa-app-shell-sidebar::-webkit-scrollbar {
+    width: 0.36rem;
+    height: 0.36rem;
+  }
+
+  .docs-app .willa-app-shell-sidebar::-webkit-scrollbar-track,
+  .docs-app .willa-app-shell-sidebar::-webkit-scrollbar-track-piece,
+  .docs-app .willa-app-shell-sidebar::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  .docs-app .willa-app-shell-sidebar::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background-color: var(--docs-sidebar-scrollbar-thumb);
+  }
+}
+
+.docs-app .willa-app-shell-main {
+  min-width: 0;
+  padding: 0;
+  background: transparent;
+}
+
+:root[data-wk-theme="dark"] .docs-app .willa-app-shell-sidebar {
+  border-right-color: rgba(255, 255, 255, 0.1);
+  background: #111827;
+}
+
+.docs-sidebar {
+  display: grid;
+  align-content: start;
+}
+
+.docs-sidebar-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 6px 16px;
+}
+
+.docs-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+}
+
+.docs-brand-mark {
+  display: inline-grid;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 10px;
+  background: #111827;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 760;
+}
+
+:root[data-wk-theme="dark"] .docs-brand-mark {
+  background: #f8fafc;
+  color: #111827;
+}
+
+.docs-brand-copy {
+  display: grid;
+  gap: 2px;
+}
+
+.docs-brand-title {
+  color: #111827;
+  font-size: 20px;
+  font-weight: 780;
+  line-height: 1;
+}
+
+:root[data-wk-theme="dark"] .docs-brand-title {
+  color: #f8fafc;
+}
+
+.docs-brand-subtitle {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 720;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+:root[data-wk-theme="dark"] .docs-brand-subtitle {
+  color: #94a3b8;
+}
+
+.docs-sidebar-search {
+  margin: 0 6px 18px;
+}
+
+.docs-nav {
+  display: grid;
+  gap: 16px;
+}
+
+.docs-nav-section {
+  display: grid;
+  gap: 4px;
+}
+
+.docs-nav-section-title,
+.docs-nav-components-head {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 760;
+  line-height: 1.2;
+}
+
+:root[data-wk-theme="dark"] .docs-nav-section-title,
+:root[data-wk-theme="dark"] .docs-nav-components-head {
+  color: #94a3b8;
+}
+
+.docs-nav-section-title {
+  padding: 0 10px 4px;
+}
+
+.docs-nav-components-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid rgba(15, 23, 42, 0.08);
+  padding: 16px 10px 0;
+}
+
+:root[data-wk-theme="dark"] .docs-nav-components-head {
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+
+.docs-nav-group {
+  display: grid;
+  gap: 12px;
+}
+
+.docs-nav-group + .docs-nav-group {
+  margin-top: 30px;
+}
+
+.docs-nav-title-row {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 6px 10px;
+  text-align: left;
+}
+
+.docs-nav-title-row:hover {
+  background: #f8fafc;
+}
+
+:root[data-wk-theme="dark"] .docs-nav-title-row:hover {
+  background: #1f2937;
+}
+
+.docs-nav-title-copy {
+  display: grid;
+  min-width: 0;
+  gap: 5px;
+}
+
+.docs-nav-title {
+  display: block;
+  color: #1f2937;
+  font-size: 16px;
+  font-weight: 820;
+  line-height: 1.15;
+}
+
+:root[data-wk-theme="dark"] .docs-nav-title {
+  color: #e5e7eb;
+}
+
+.docs-nav-description {
+  display: block;
+  color: #94a3b8;
+  font-size: 11.5px;
+  line-height: 1.25;
+}
+
+.docs-nav-title-action {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+}
+
+.docs-nav-toggle-icon {
+  width: 16px;
+  height: 16px;
+  color: #94a3b8;
+  transition: transform 160ms ease;
+}
+
+.docs-nav-title-row[aria-expanded="true"] .docs-nav-toggle-icon {
+  transform: rotate(180deg);
+}
+
+:root[data-wk-theme="dark"] .docs-nav-toggle-icon {
+  color: #64748b;
+}
+
+.docs-nav-anchor-title {
+  color: #64748b;
+  font-weight: 580;
+}
+
+.docs-nav-anchor-meta {
+  color: #475569;
+  font-weight: 720;
+}
+
+.docs-nav-anchor-link.willa-anchor__link--active {
+  color: #1e40af;
+}
+
+.docs-nav-anchor-link.willa-anchor__link--active .docs-nav-anchor-title {
+  color: #1d4ed8;
+  font-weight: 680;
+}
+
+.docs-nav-anchor-link.willa-anchor__link--active .docs-nav-anchor-meta {
+  color: #1e40af;
+}
+
+:root[data-wk-theme="dark"] .docs-nav-description {
+  color: #64748b;
+}
+
+:root[data-wk-theme="dark"] .docs-nav-anchor-title {
+  color: #94a3b8;
+}
+
+:root[data-wk-theme="dark"] .docs-nav-anchor-meta {
+  color: #e2e8f0;
+}
+
+.docs-nav-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  border-radius: 999px;
+  background: #f1f5f9;
+  color: #64748b;
+  padding: 2px 7px;
+  font-size: 11px;
+  font-weight: 720;
+  line-height: 1.3;
+}
+
+:root[data-wk-theme="dark"] .docs-nav-count {
+  background: #1f2937;
+  color: #cbd5e1;
+}
+
+.docs-nav-empty {
+  margin: 0 10px;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #64748b;
+  padding: 12px;
+  font-size: 13px;
+}
+
+:root[data-wk-theme="dark"] .docs-nav-empty {
+  background: #0f172a;
+  color: #94a3b8;
+}
+
+.docs-main {
+  min-width: 0;
+  padding: 24px 36px 36px;
+}
+
+.docs-header {
+  max-width: 1240px;
+  margin: 0 auto 22px;
+}
+
+.docs-panel-title {
+  margin: 0;
+  color: #2563eb;
+  font-size: 13px;
+  font-weight: 720;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+:root[data-wk-theme="dark"] .docs-panel-title {
+  color: #7dd3fc;
+}
+
+.docs-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.docs-sidebar-actions {
+  display: none;
+}
+
+.docs-content {
+  display: grid;
+  gap: 28px;
+  max-width: 1240px;
+  margin: 0 auto;
+}
+
+.docs-usage {
+  display: grid;
+  gap: 30px;
+  scroll-margin-top: 28px;
+}
+
+.docs-usage-heading {
+  max-width: 760px;
+  padding-bottom: 10px;
+}
+
+.docs-usage-heading h2,
+.docs-usage-heading p,
+.docs-usage-section h3,
+.docs-usage-section p {
+  margin: 0;
+}
+
+.docs-usage-heading h2 {
+  color: var(--willa-text-strong);
+  font-size: 24px;
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+.docs-usage-heading p,
+.docs-usage-section p {
+  color: var(--willa-text-soft);
+  font-size: 14px;
+  line-height: 1.65;
+}
+
+.docs-usage-section {
+  min-width: 0;
+  border-top: 1px solid var(--willa-line);
+  padding-top: 20px;
+}
+
+.docs-usage-section h3 {
+  color: var(--willa-text-strong);
+  font-size: 15px;
+  line-height: 1.4;
+  letter-spacing: 0;
+}
+
+.docs-usage-code-block {
+  margin: 1.08rem 0;
+  border: 1px solid var(--willa-code-block-border);
+}
+
+.docs-section {
+  display: grid;
+  gap: 18px;
+  scroll-margin-top: 28px;
+}
+
+.docs-intro,
+.docs-demo-block,
+.docs-props {
+  display: grid;
+  min-width: 0;
+  border: 1px solid var(--willa-line);
+  border-radius: 8px;
+  background: var(--willa-panel-bg);
+}
+
+.docs-intro {
+  gap: 10px;
+  overflow: visible;
+  padding: 24px;
+}
+
+.docs-demo-block {
+  gap: 0;
+  overflow: visible;
+}
+
+.docs-demo-block:has(.docs-github-preview),
+.docs-demo-block:has(.willa-avatar-hover-card),
+.docs-demo-block:has(.willa-prose-github-hover-card) {
+  z-index: 4;
+}
+
+.docs-demos {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+}
+
+.docs-demo-block-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--willa-line);
+}
+
+.docs-demo-view-switch {
+  flex: 0 0 auto;
+}
+
+.docs-demo-block-preview {
+  --docs-demo-readable-width: 56rem;
+  --docs-demo-narrow-width: 42rem;
+
+  display: grid;
+  gap: 14px;
+  justify-items: center;
+  min-width: 0;
+  padding: 20px;
+}
+
+.docs-demo-block-preview > * {
+  margin: 0;
+}
+
+.docs-demo-block-preview
+  > :where(
+    .willa-card,
+    .willa-chat,
+    .willa-chat-message,
+    .willa-composer,
+    .willa-empty-state,
+    .willa-file-card,
+    .willa-form-message,
+    .willa-generation-card,
+    .willa-prompt-input,
+    .willa-prose-skeleton,
+    .willa-reasoning-steps,
+    .willa-source-card,
+    .willa-thinking-indicator,
+    .willa-tool-call-card
+  ) {
+  width: min(100%, var(--docs-demo-readable-width));
+}
+
+.docs-demo-block-preview
+  > :where(
+    .willa-checkbox,
+    .willa-form,
+    .willa-form-field,
+    .willa-form-group,
+    .willa-input,
+    .willa-radio,
+    .willa-range-input,
+    .willa-select,
+    .willa-switch,
+    .willa-textarea
+  ) {
+  width: min(100%, var(--docs-demo-narrow-width));
+}
+
+.docs-demo-block-preview
+  > :where(
+    .willa-code-tabs,
+    .willa-file-tree,
+    .willa-filter-bar,
+    .willa-message-list,
+    .willa-table,
+    .willa-prose,
+    .willa-prose-pre
+  ) {
+  justify-self: stretch;
+  width: 100%;
+}
+
+.docs-demo-block .willa-prose-pre {
+  max-width: 100%;
+  border: 0;
+  border-radius: 0 0 8px 8px;
+}
+
+.docs-demo-stack,
+.docs-demo-group {
+  display: grid;
+  gap: 14px;
+}
+
+.docs-demo-title {
+  color: var(--willa-text-soft);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.docs-github-preview {
+  padding-top: 12px;
+}
+
+.docs-loading {
+  display: grid;
+  gap: 14px;
+  border: 1px solid var(--willa-line);
+  border-radius: 8px;
+  background: var(--willa-panel-bg);
+  padding: 24px;
+}
+
+.docs-intro h2 {
+  margin: 0 0 8px;
+  color: var(--willa-text-strong);
+  font-size: 24px;
+  line-height: 1.15;
+  letter-spacing: 0;
+}
+
+.docs-description {
+  margin: 0;
+  color: var(--willa-text-soft);
+  line-height: 1.6;
+}
+
+.docs-props {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+  padding: 20px;
+}
+
+.docs-props-group {
+  display: grid;
+  gap: 10px;
+}
+
+.docs-props-group-heading {
+  display: grid;
+  gap: 4px;
+}
+
+.docs-props-group-description {
+  max-width: 68rem;
+  margin: 0;
+  color: var(--willa-text-soft);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.docs-prop-description {
+  margin: 0;
+  color: var(--willa-text-soft);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.docs-prop-description-tooltip {
+  display: flex;
+  width: 100%;
+}
+
+.docs-prop-description-trigger {
+  display: block;
+  min-width: 0;
+  outline: 0;
+}
+
+.docs-prop-tooltip-content {
+  max-width: min(34rem, calc(100vw - 1rem));
+  white-space: normal;
+}
+
+.docs-prop-tooltip-content--code {
+  max-width: min(48rem, calc(100vw - 1rem));
+}
+
+.docs-prop-tooltip-value {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.docs-prop-tooltip-inline,
+.docs-prop-tooltip-code {
+  margin: 0;
+  color: inherit;
+  font-family: var(--willa-code-font);
+  font-size: 0.8rem;
+  line-height: 1.55;
+}
+
+.docs-prop-tooltip-inline {
+  white-space: normal;
+}
+
+.docs-prop-tooltip-code {
+  max-height: min(18rem, calc(100vh - 6rem));
+  max-width: min(44rem, calc(100vw - 3rem));
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(
+      --docs-sidebar-scrollbar-thumb,
+      var(
+        --willa-scrollbar-thumb,
+        color-mix(in srgb, var(--willa-text-soft) 56%, transparent)
+      )
+    )
+    transparent;
+  -ms-overflow-style: auto;
+  white-space: pre;
+}
+
+.docs-prop-tooltip-code::-webkit-scrollbar {
+  width: 0.36rem;
+  height: 0.36rem;
+}
+
+.docs-prop-tooltip-code::-webkit-scrollbar-track,
+.docs-prop-tooltip-code::-webkit-scrollbar-track-piece,
+.docs-prop-tooltip-code::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.docs-prop-tooltip-code::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(
+    --docs-sidebar-scrollbar-thumb,
+    var(
+      --willa-scrollbar-thumb,
+      color-mix(in srgb, var(--willa-text-soft) 56%, transparent)
+    )
+  );
+}
+
+.docs-props-separator,
+.docs-demo-separator {
+  margin: 0;
+}
+
+.docs-meta-list {
+  display: grid;
+  grid-template-columns: minmax(220px, max-content) 1fr;
+  column-gap: 12px;
+  row-gap: 8px;
+  align-items: start;
+  margin: 0;
+}
+
+.docs-meta-list div {
+  display: contents;
+}
+
+.docs-meta-list dt,
+.docs-meta-list dd {
+  margin: 0;
+}
+
+.docs-meta-list dt {
+  min-width: 0;
+}
+
+.docs-prop-name-cell {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+}
+
+.docs-prop-token {
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+  outline: 0;
+}
+
+.docs-prop-token code {
+  display: inline-block;
+  max-width: 100%;
+  border-radius: 4px;
+  background: var(--willa-inline-code-bg);
+  padding: 0.12em 0.32em;
+  font-family: var(--willa-code-font);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.docs-prop-token:focus-visible code,
+.docs-prop-default:focus-visible,
+.docs-prop-description-trigger:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--willa-accent), transparent 35%);
+  outline-offset: 2px;
+}
+
+.docs-prop-name-cell .docs-prop-token {
+  flex: 0 1 auto;
+}
+
+.docs-prop-default {
+  display: inline-block;
+  max-width: 100%;
+  border-radius: 4px;
+  background: var(--willa-inline-code-bg);
+  padding: 0.12em 0.36em;
+  color: #475569;
+  font-family: var(--willa-code-font);
+  font-size: 0.88em;
+  outline: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.docs-prop-empty {
+  color: #94a3b8;
+}
+
+:root[data-wk-theme="dark"] .docs-prop-default {
+  color: #cbd5e1;
+}
+
+@media (max-width: 1040px) {
+  .docs-app.willa-app-shell--with-sidebar .willa-app-shell-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .docs-app .willa-app-shell-main {
+    order: 2;
+  }
+
+  .docs-app .willa-app-shell-sidebar {
+    order: 1;
+    position: static;
+    height: auto;
+    border-right: 0;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
+    padding: 18px;
+  }
+
+  :root[data-wk-theme="dark"] .docs-app .willa-app-shell-sidebar {
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .docs-header-actions {
+    display: none;
+  }
+
+  .docs-sidebar-actions {
+    display: flex;
+  }
+
+  .docs-nav {
+    grid-template-columns: 1fr;
+  }
+
+  .docs-nav-group {
+    align-content: start;
+  }
+
+  .docs-nav-group + .docs-nav-group {
+    margin-top: 8px;
+  }
+}
+
+@media (max-width: 640px) {
+  .docs-main {
+    padding: 16px;
+  }
+
+  .docs-header {
+    margin-bottom: 18px;
+  }
+
+  .docs-actions {
+    flex-wrap: wrap;
+  }
+
+  .docs-content {
+    gap: 20px;
+  }
+
+  .docs-section {
+    gap: 18px;
+  }
+
+  .docs-intro,
+  .docs-demo-block-preview,
+  .docs-props,
+  .docs-loading {
+    padding: 16px;
+  }
+
+  .docs-demo-block-header {
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 12px 14px;
+  }
+
+  .docs-demo-view-switch {
+    display: flex;
+    width: 100%;
+  }
+
+  .docs-demo-view-switch .willa-segmented-option {
+    flex: 1 1 0;
+  }
+
+  .docs-prop-name-cell {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .docs-prop-token {
+    max-width: 100%;
+  }
+
+  .docs-meta-list {
+    grid-template-columns: 1fr;
+  }
+
+  .docs-meta-list dd {
+    padding-bottom: 4px;
+  }
+}