@threadlabs/looma 0.4.0 → 0.5.1

package/styles/ui-disclosure.css

@@ -0,0 +1,95 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-disclosure"]) to ([data-component], [data-slotted]) {
+/* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
+     * select or combobox. Stacked disclosures share their dividers. */
+    :scope {
+      display: block;
+      inline-size: 100%;
+      overflow: clip;
+      border-block-end: 1px solid var(--ui-border-default);
+      color: var(--ui-text-primary);
+    }
+
+    .trigger {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: var(--ui-space-3);
+      align-items: center;
+      inline-size: 100%;
+      min-block-size: 2.5rem;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border: 0;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-weight: var(--ui-font-semibold, 600);
+      text-align: start;
+      cursor: pointer;
+      border-radius: var(--ui-radius-1);
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .trigger:hover:not(:disabled) {
+      background: var(--ui-surface-muted);
+    }
+    .trigger:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+    }
+    .trigger:disabled {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+
+    .chevron {
+      inline-size: 0.5rem;
+      block-size: 0.5rem;
+      border-inline-end: 2px solid currentColor;
+      border-block-end: 2px solid currentColor;
+      transform: rotate(45deg) translate(-1px, -1px);
+      transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .panel {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows var(--ui-motion-fast) var(--ui-motion-ease-out, var(--ui-motion-ease));
+    }
+
+    .panel-inner {
+      min-block-size: 0;
+      overflow: hidden;
+      padding-inline: var(--ui-space-3);
+    }
+
+    :scope[data-ui-disclosure-state~="internalOpen"] .panel {
+      grid-template-rows: 1fr;
+    }
+    :scope[data-ui-disclosure-state~="internalOpen"] .panel-inner {
+      padding-block: 0 var(--ui-space-3);
+    }
+    :scope[data-ui-disclosure-state~="internalOpen"] .chevron {
+      transform: rotate(225deg) translate(-1px, -1px);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .panel,
+      .chevron {
+        transition: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-disclosure"]) to ([data-component]) {
+/* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
+     * select or combobox. Stacked disclosures share their dividers. */
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-editable.css

@@ -0,0 +1,139 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-editable"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+      color: var(--ui-text-primary);
+    }
+
+    /* The value and the input share one grid cell with identical box metrics, so switching between
+     * display and edit never changes the control's size or moves the text. */
+    .field {
+      display: inline-grid;
+      min-inline-size: 8rem;
+      max-inline-size: 100%;
+    }
+
+    .preview,
+    .input {
+      grid-area: 1 / 1;
+      box-sizing: border-box;
+      min-block-size: var(--ui-control-size-sm, 2rem);
+      margin: 0;
+      padding: var(--ui-space-1) var(--ui-space-2);
+      border: 1px solid transparent;
+      border-radius: var(--ui-radius-2);
+      font: inherit;
+      line-height: var(--ui-line-height-md);
+      color: inherit;
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .preview {
+      display: inline-flex;
+      gap: var(--ui-space-2);
+      align-items: center;
+      background: transparent;
+      text-align: start;
+      cursor: pointer;
+    }
+
+    .preview:hover:not(:disabled) {
+      background: var(--ui-surface-muted);
+    }
+
+    .preview:focus-visible {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    .hint {
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    /* Contained so it takes the value's width instead of its own default input width. */
+    .input {
+      contain: inline-size;
+      inline-size: 100%;
+      min-inline-size: 0;
+      visibility: hidden;
+      background: var(--ui-control-surface, var(--ui-surface-elevated));
+    }
+
+    .input:focus {
+      outline: none;
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      box-shadow:
+        var(--ui-control-inset),
+        var(--ui-control-focus-halo-shadow);
+    }
+
+    .input::selection {
+      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+    }
+
+    :scope[data-ui-editable-state~="internalEdit"] .preview {
+      visibility: hidden;
+    }
+    :scope[data-ui-editable-state~="internalEdit"] .input {
+      visibility: visible;
+    }
+
+    .actions {
+      display: none;
+      gap: var(--ui-space-1);
+    }
+    :scope[data-ui-editable-state~="internalEdit"] .actions {
+      display: inline-flex;
+    }
+
+    .actions button {
+      min-block-size: var(--ui-control-size-sm, 2rem);
+      padding: 0 var(--ui-space-3);
+      border: 1px solid var(--ui-border-strong);
+      border-radius: var(--ui-radius-2);
+      background: var(--ui-surface-elevated);
+      background-image: var(--ui-raised-highlight, none);
+      box-shadow: var(--ui-raised, none);
+      color: inherit;
+      font: inherit;
+      font-size: var(--ui-font-size-sm);
+      cursor: pointer;
+    }
+
+    .actions .save {
+      border-color: var(--ui-accent-solid);
+      background: var(--ui-accent-solid);
+      color: var(--ui-text-on-accent);
+    }
+
+    .actions button:focus-visible {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    :scope[data-ui-editable-state~="disabled"] .preview {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-editable"]) to ([data-component]) {
+/* The value and the input share one grid cell with identical box metrics, so switching between
+     * display and edit never changes the control's size or moves the text. */
+
+    /* Contained so it takes the value's width instead of its own default input width. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-editor-insert-table-grid.css

@@ -0,0 +1,65 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-editor-insert-table-grid"]) to ([data-component], [data-slotted]) {
+:scope {
+      padding: var(--ui-space-3, 12px);
+      background: var(--ui-surface, #fff);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-md, 6px);
+      box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+    }
+
+    .hint {
+      margin: 0 0 var(--ui-space-2, 8px);
+      font-size: var(--ui-text-sm, 0.875rem);
+      color: var(--ui-text-muted, #6b7280);
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
+      grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
+      gap: 2px;
+      margin-bottom: var(--ui-space-2, 8px);
+    }
+
+    .cell {
+      width: 1.25rem;
+      height: 1.25rem;
+      padding: 0;
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: 2px;
+      background: var(--ui-surface, #fff);
+      cursor: pointer;
+    }
+
+    .cell.selected {
+      background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+      border-color: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+    }
+
+    .header {
+      display: block;
+      margin-bottom: var(--ui-space-2, 8px);
+      font-size: var(--ui-text-sm, 0.875rem);
+      cursor: pointer;
+    }
+
+    :scope .insert {
+      width: 100%;
+      padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-sm, 4px);
+      background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+      color: var(--ui-accent-contrast, #fff);
+      font-size: var(--ui-text-sm, 0.875rem);
+      cursor: pointer;
+    }
+
+    :scope .insert:hover {
+      filter: brightness(1.05);
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+}

package/styles/ui-editor-mention-menu.css

@@ -0,0 +1,121 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-editor-mention-menu"]) to ([data-component], [data-slotted]) {
+:scope {
+      user-select: none;
+    }
+
+    :scope {
+      display: flex;
+      overflow: hidden;
+      flex-direction: column;
+      background: var(--ui-surface, #fff);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-xl, 1rem);
+      box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--ui-space-3, 12px);
+      padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+      color: var(--ui-text-secondary, #4b5563);
+      border-bottom: 1px solid var(--ui-border, #e5e7eb);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      font-weight: var(--ui-font-semibold, 600);
+    }
+
+    .hint {
+      overflow: hidden;
+      color: var(--ui-text-muted, #6b7280);
+      font-weight: var(--ui-font-normal, 400);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .list {
+      max-height: 280px;
+      padding: var(--ui-space-1, 4px) 0;
+      margin: 0;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      list-style: none;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      min-height: 44px;
+      padding: var(--ui-space-1-5, 6px) var(--ui-space-3, 12px);
+      gap: var(--ui-space-3, 12px);
+      cursor: pointer;
+    }
+
+    .item.active {
+      background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
+    }
+
+    .avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      flex: 0 0 auto;
+      color: var(--ui-accent-active, var(--ui-accent-solid, #2563eb));
+      background: var(--ui-accent-soft, var(--ui-accent-subtle, #eff6ff));
+      border-radius: 999px;
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      font-weight: var(--ui-font-semibold, 600);
+    }
+
+    .body {
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+    }
+
+    .label,
+    .detail {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .label {
+      color: var(--ui-text-primary, #111827);
+      font-size: var(--ui-font-size-sm, 0.875rem);
+      font-weight: var(--ui-font-medium, 500);
+    }
+
+    .detail,
+    .loading {
+      color: var(--ui-text-muted, #6b7280);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+    }
+
+    .loading {
+      min-height: 44px;
+      padding: var(--ui-space-3, 12px);
+    }
+
+    @media (max-width: 767px) {
+      :scope {
+        border-bottom: 0;
+        border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
+      }
+
+      .list {
+        max-height: calc(60dvh - 48px);
+      }
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-editor-mention-menu"]) to ([data-component]) {
+@media (max-width: 767px) {
+    }
+}

package/styles/ui-editor-slash-menu.css

@@ -0,0 +1,179 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-editor-slash-menu"]) to ([data-component], [data-slotted]) {
+:scope {
+      user-select: none;
+    }
+
+    :scope {
+      background: var(--ui-surface, #fff);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-xl, 1rem);
+      box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    @media (max-width: 767px) {
+      :scope {
+        border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
+        border-bottom: none;
+      }
+    }
+
+    .header {
+      display: none;
+      align-items: center;
+      gap: var(--ui-space-2, 8px);
+      padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px);
+      border-bottom: 1px solid var(--ui-border, #e5e7eb);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      color: var(--ui-text-muted, #6b7280);
+      font-weight: var(--ui-font-semibold, 600);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    @media (max-width: 767px) {
+      .header {
+        display: flex;
+      }
+    }
+
+    .header-query {
+      background: var(--ui-surface-hover, #f3f4f6);
+      border-radius: var(--ui-radius-sm, 4px);
+      padding: 0.1em 0.4em;
+      font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      color: var(--ui-accent, #3b82f6);
+      text-transform: none;
+      letter-spacing: 0;
+    }
+
+    .list {
+      list-style: none;
+      margin: 0;
+      padding: var(--ui-space-1, 4px) 0;
+      overflow-y: auto;
+      max-height: 280px;
+      overscroll-behavior: contain;
+    }
+
+    @media (max-width: 767px) {
+      .list {
+        max-height: calc(60dvh - 80px);
+        padding: var(--ui-space-1, 4px) 0 var(--ui-space-2, 8px);
+      }
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-3, 12px);
+      padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+      min-height: 44px;
+      cursor: pointer;
+      transition: background-color 120ms ease;
+    }
+
+    .item.active {
+      background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      background: var(--ui-surface-hover, #f3f4f6);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-md, 6px);
+      font-size: var(--ui-font-size-sm, 0.875rem);
+      font-weight: var(--ui-font-bold, 700);
+      color: var(--ui-text-secondary, #4b5563);
+      font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+      flex-shrink: 0;
+      line-height: 1;
+    }
+
+    .item.active .icon {
+      background: var(--ui-accent, #3b82f6);
+      border-color: var(--ui-accent, #3b82f6);
+      color: var(--ui-accent-contrast, #fff);
+    }
+
+    .icon {
+      --ui-icon-size: 1rem;
+      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+    }
+
+    .body {
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+      gap: 1px;
+    }
+
+    .title {
+      font-size: var(--ui-font-size-sm, 0.875rem);
+      font-weight: var(--ui-font-medium, 500);
+      color: var(--ui-text, #111827);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .description {
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      color: var(--ui-text-muted, #6b7280);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .footer {
+      display: none;
+      padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+      border-top: 1px solid var(--ui-border, #e5e7eb);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      color: var(--ui-text-muted, #6b7280);
+    }
+
+    @media (min-width: 768px) {
+      .footer {
+        display: block;
+      }
+    }
+
+    :scope kbd {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+      font-size: 10px;
+      background: var(--ui-surface-hover, #f3f4f6);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: 3px;
+      padding: 0 3px;
+      color: var(--ui-text-secondary, #4b5563);
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-editor-slash-menu"]) to ([data-component]) {
+@media (max-width: 767px) {
+    }
+
+    @media (max-width: 767px) {
+    }
+
+    @media (max-width: 767px) {
+    }
+
+    @media (min-width: 768px) {
+    }
+}

package/styles/ui-editor-table-context-menu.css

@@ -0,0 +1,118 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-editor-table-context-menu"]) to ([data-component], [data-slotted]) {
+:scope {
+      min-width: 14rem;
+      max-width: min(17rem, calc(100vw - 24px));
+      max-height: min(28rem, calc(100vh - 24px));
+      padding: var(--ui-space-1-5, 6px);
+      background: var(--ui-surface, #fff);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-lg, 10px);
+      box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scrollbar-width: thin;
+    }
+
+    .section {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+
+    :scope button {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-2, 8px);
+      width: 100%;
+      text-align: left;
+      min-height: 32px;
+      padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
+      border: none;
+      border-radius: var(--ui-radius-sm, 4px);
+      background: none;
+      font-size: var(--ui-font-size-sm, 0.875rem);
+      cursor: pointer;
+      color: var(--ui-text, #111);
+    }
+
+    :scope button {
+      --ui-icon-size: 1rem;
+      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+    }
+
+    :scope button:hover:not(:disabled) {
+      background: var(--ui-surface-hover, #f3f4f6);
+    }
+
+    :scope button.selected {
+      background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
+    }
+
+    :scope button.danger {
+      color: var(--ui-danger, #dc2626);
+    }
+
+    .swatches {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 3px;
+    }
+
+    .swatch-button {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-2, 8px);
+    }
+
+    .swatch {
+      display: inline-flex;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 999px;
+      border: 1px solid var(--ui-border, #d1d5db);
+      background: var(--ui-editor-table-context-swatch, #fff);
+      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
+      flex-shrink: 0;
+    }
+
+    .swatch.default {
+      position: relative;
+      background:
+        linear-gradient(
+          135deg,
+          transparent calc(50% - 1px),
+          var(--ui-text-muted, #6b7280) calc(50% - 1px),
+          var(--ui-text-muted, #6b7280) calc(50% + 1px),
+          transparent calc(50% + 1px)
+        ),
+        var(--ui-surface, #fff);
+    }
+
+    .swatch-label {
+      min-width: 0;
+      white-space: nowrap;
+    }
+
+    .heading {
+      padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
+      font-size: 0.6875rem;
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--ui-text-muted, #6b7280);
+    }
+
+    .sep {
+      height: 1px;
+      background: var(--ui-border, #e5e7eb);
+      margin: var(--ui-space-1, 4px) 0;
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+}