@threadlabs/looma 0.4.0 → 0.5.1

package/styles/ui-editor-table-overlay.css

@@ -0,0 +1,318 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-editor-table-overlay"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: block;
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+      pointer-events: none;
+    }
+
+    :scope {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+      pointer-events: none;
+    }
+
+    .rows,
+    .cols {
+      pointer-events: none;
+      position: absolute;
+    }
+
+    .rows {
+      inset: 0;
+      width: 100%;
+    }
+
+    .cols {
+      inset: 0;
+      height: 100%;
+    }
+
+    .control {
+      position: absolute;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    .handle {
+      position: absolute;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong, #c8c8c4));
+      border-radius: var(--ui-radius-round, 999px);
+      background: color-mix(in srgb, var(--ui-surface-elevated, #fff) 96%, transparent);
+      color: var(--ui-affordance-near-color, var(--ui-text-secondary, #5c5c5c));
+      font: inherit;
+      font-size: 16px;
+      line-height: 1;
+      box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
+      opacity: 0;
+      scale: 0.72;
+      transition:
+        opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        scale var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+      pointer-events: auto;
+      cursor: pointer;
+    }
+
+    .handle {
+      --ui-icon-size: 14px;
+      --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
+    }
+
+    .handle[data-ui-proximity="near"],
+    .control.active .handle,
+    .handle:focus-visible {
+      opacity: 1;
+      scale: 1;
+    }
+
+    .control.active .handle,
+    .handle:focus-visible {
+      border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
+      background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
+      color: var(--ui-text-on-accent, #fff);
+      box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
+    }
+
+    .handle:focus-visible,
+    .selector:focus-visible,
+    .cell-menu:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, #5b55d6);
+      outline-offset: 2px;
+    }
+
+    .control.row {
+      left: 0;
+      width: 100%;
+      height: 0;
+    }
+
+    .control.row .handle {
+      top: -12px;
+      left: -30px;
+    }
+
+    .control.col {
+      top: 0;
+      width: 0;
+      height: 100%;
+    }
+
+    .control.col .handle {
+      top: -30px;
+      left: -12px;
+    }
+
+    .line {
+      position: absolute;
+      background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
+      opacity: 0;
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    }
+
+    .control.row .line {
+      inset: -1px 0 auto;
+      height: 2px;
+    }
+
+    .control.col .line {
+      inset: 0 auto 0 -1px;
+      width: 2px;
+    }
+
+    .control.active .line {
+      opacity: 0.8;
+    }
+
+    .guide {
+      position: absolute;
+      width: var(--ui-affordance-guide-size, 4px);
+      height: var(--ui-affordance-guide-size, 4px);
+      border-radius: var(--ui-radius-round, 999px);
+      background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
+      opacity: var(--ui-affordance-guide-opacity, 0.42);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    }
+
+    .control.row .guide {
+      left: -10px;
+      top: -2px;
+    }
+
+    .control.col .guide {
+      left: -2px;
+      top: -10px;
+    }
+
+    .control:has(.handle[data-ui-proximity="near"]) .guide,
+    .control.active .guide {
+      opacity: 0;
+    }
+
+    .tooltip {
+      position: absolute;
+      z-index: 2;
+      top: calc(100% + 6px);
+      left: 50%;
+      width: max-content;
+      max-width: 14rem;
+      padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
+      border-radius: var(--ui-radius-1, 4px);
+      background: var(--ui-text-primary, #1a1a1a);
+      color: var(--ui-surface-elevated, #fff);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      font-weight: var(--ui-font-medium, 500);
+      line-height: var(--ui-line-height-md, 1.4);
+      opacity: 0;
+      transform: translateX(-50%);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+      pointer-events: none;
+    }
+
+    .control.row .tooltip {
+      top: 50%;
+      left: auto;
+      right: calc(100% + 8px);
+      transform: translateY(-50%);
+    }
+
+    .control.active .tooltip,
+    .handle:focus-visible .tooltip {
+      opacity: 1;
+    }
+
+    .selector,
+    .cell-menu {
+      position: absolute;
+      z-index: 2;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      border: 1px solid transparent;
+      background: transparent;
+      color: var(--ui-text-secondary, #5c5c5c);
+      box-shadow: none;
+      pointer-events: auto;
+      cursor: pointer;
+      transition:
+        color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        box-shadow var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    }
+
+    .selector:hover,
+    .cell-menu:hover {
+      background: var(--ui-icon-button-hover-bg, var(--ui-surface-muted, #f3f4f6));
+      color: var(--ui-icon-button-hover-color, var(--ui-text-primary, #1a1a1a));
+      box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
+    }
+
+    .selector {
+      border-radius: var(--ui-radius-round, 999px);
+    }
+
+    .selector::before {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      border-radius: var(--ui-radius-round, 999px);
+      background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
+      opacity: var(--ui-affordance-guide-opacity, 0.42);
+      transform: translate(-50%, -50%);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+      pointer-events: none;
+    }
+
+    .selector .glyph {
+      display: block;
+      width: 14px;
+      height: 14px;
+      --ui-icon-size: 14px;
+      --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
+      opacity: 0;
+      transform: scale(0.72);
+      transition:
+        opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        transform var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    }
+
+    .selector:hover::before,
+    .selector:focus-visible::before {
+      opacity: 0;
+    }
+
+    .selector:hover .glyph,
+    .selector:focus-visible .glyph {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .selector.row {
+      left: -9px;
+      width: 18px;
+      height: 32px;
+      transform: translateY(-50%);
+    }
+
+    .selector.row::before {
+      width: 2px;
+      height: 16px;
+    }
+
+    .selector.column {
+      top: -9px;
+      width: 32px;
+      height: 18px;
+      transform: translateX(-50%);
+    }
+
+    .selector.column::before {
+      width: 16px;
+      height: 2px;
+    }
+
+    @media (hover: none), (pointer: coarse) {
+      .selector::before {
+        opacity: 0;
+      }
+
+      .selector .glyph {
+        opacity: 1;
+        transform: none;
+      }
+    }
+
+    .cell-menu {
+      width: 24px;
+      height: 24px;
+      border-radius: var(--ui-radius-1, 4px);
+      background: color-mix(in srgb, var(--ui-surface-muted, #f3f4f6) 78%, transparent);
+    }
+
+    .cell-menu {
+      --ui-icon-size: 15px;
+      --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-editor-table-overlay"]) to ([data-component]) {
+@media (hover: none), (pointer: coarse) {
+    }
+}

package/styles/ui-editor-table-toolbar.css

@@ -0,0 +1,191 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-editor-table-toolbar"]) to ([data-component], [data-slotted]) {
+.looma-editor__mobile-toolbar-shell :scope {
+      min-width: max-content;
+      min-height: 100%;
+      padding: 0;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+
+    .looma-editor__mobile-toolbar-shell :scope button {
+      min-height: 44px;
+      background: transparent;
+    }
+
+    .looma-editor__mobile-toolbar-shell :scope button.active,
+    .looma-editor__mobile-toolbar-shell :scope button.selected {
+      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+    }
+
+    .looma-editor__mobile-toolbar-shell :scope .menu {
+      top: auto;
+      right: 0;
+      bottom: calc(100% + var(--ui-space-2, 8px));
+      max-height: min(50dvh, 22rem);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+    :scope {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-1, 4px);
+      padding: var(--ui-space-1, 4px);
+      background: color-mix(in srgb, var(--ui-surface, #fff) 94%, transparent);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: calc(var(--ui-radius-md, 6px) + 2px);
+      box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+      backdrop-filter: blur(10px);
+    }
+
+    .group {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      overflow: hidden;
+    }
+
+    .sep {
+      width: 1px;
+      align-self: stretch;
+      background: var(--ui-border, #e5e7eb);
+    }
+
+    .overflow {
+      position: relative;
+    }
+
+    :scope button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--ui-space-1-5, 6px);
+      min-height: 32px;
+      border: 0;
+      border-radius: var(--ui-radius-sm, 4px);
+      background: transparent;
+      color: var(--ui-text-primary, #111827);
+      cursor: pointer;
+      font-size: var(--ui-text-sm, 0.875rem);
+      font-weight: 500;
+      line-height: 1;
+      padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
+      white-space: nowrap;
+    }
+
+    :scope button:hover {
+      background: var(--ui-surface-hover, #f3f4f6);
+    }
+
+    :scope button.active {
+      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+      color: var(--ui-accent-active, #003d7a);
+    }
+
+    .group button {
+      border-radius: var(--ui-radius-sm, 4px);
+    }
+
+    .group button + button {
+      border-left: 0;
+    }
+
+    :scope .more {
+      border: 0;
+      border-radius: var(--ui-radius-sm, 4px);
+    }
+
+    :scope button.danger {
+      color: var(--ui-danger, #dc2626);
+    }
+
+    :scope {
+      --ui-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
+      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+    }
+
+    .chevron {
+      display: inline-flex;
+      --ui-icon-size: 0.875rem;
+    }
+
+    :scope .icon-button {
+      width: 32px;
+      padding-inline: 0;
+    }
+
+    .menu {
+      position: absolute;
+      top: calc(100% + var(--ui-space-2, 8px));
+      right: 0;
+      min-width: 12rem;
+      padding: var(--ui-space-1, 4px);
+      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));
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      z-index: 2;
+    }
+
+    .menu-section + .menu-section {
+      margin-top: var(--ui-space-1, 4px);
+      padding-top: var(--ui-space-1, 4px);
+      border-top: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, transparent);
+    }
+
+    .menu-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);
+    }
+
+    .menu button {
+      display: flex;
+      justify-content: flex-start;
+      width: 100%;
+      text-align: left;
+    }
+
+    .swatches {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 2px;
+    }
+
+    :scope .swatch-button {
+      gap: var(--ui-space-1, 4px);
+      justify-content: flex-start;
+    }
+
+    .swatch {
+      width: 14px;
+      height: 14px;
+      flex: 0 0 14px;
+      border: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, #000);
+      border-radius: 3px;
+      background: var(--ui-editor-table-toolbar-swatch);
+    }
+
+    .swatch.default {
+      background:
+        linear-gradient(135deg, transparent 44%, var(--ui-danger, #dc2626) 46% 54%, transparent 56%),
+        var(--ui-surface, #fff);
+    }
+
+    .swatch-button.selected {
+      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+}

package/styles/ui-editor-toolbar.css

@@ -0,0 +1,115 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-editor-toolbar"]) to ([data-component], [data-slotted]) {
+:scope {
+      position: sticky;
+      top: 0;
+      z-index: var(--ui-editor-toolbar-z-index, 10);
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: var(--ui-editor-toolbar-gap, 2px);
+      padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
+      min-height: var(--ui-editor-toolbar-min-height, 48px);
+      overflow-x: auto;
+      scrollbar-width: none;
+      white-space: nowrap;
+      background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
+      border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+    }
+
+    :scope::-webkit-scrollbar {
+      display: none;
+    }
+
+    :scope[data-ui-editor-toolbar-state~="floating"] {
+      position: static;
+      top: auto;
+      width: max-content;
+      max-width: min(calc(100vw - 24px), 100%);
+      min-height: auto;
+      padding: var(--ui-editor-toolbar-floating-padding, 4px);
+      overflow-x: visible;
+      background: color-mix(in srgb, var(--ui-editor-toolbar-bg, var(--ui-surface, #fff)) 96%, transparent);
+      border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+      border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
+      box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
+      backdrop-filter: blur(10px);
+    }
+
+    @media (max-width: 767px) {
+      :scope {
+        position: fixed;
+        top: auto;
+        bottom: env(safe-area-inset-bottom);
+        left: 0;
+        right: 0;
+        min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
+        border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+        border-bottom: none;
+        box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
+      }
+
+      :scope[data-ui-editor-toolbar-state~="floating"] {
+        position: static;
+        inset: auto;
+        min-height: auto;
+        border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+        border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
+        box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
+      }
+    }
+
+    /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
+    .looma-editor__sticky-toolbar-shell :scope {
+      position: static;
+      min-height: var(--ui-editor-toolbar-min-height, 48px);
+      overscroll-behavior-inline: contain;
+      background: transparent;
+      border: 0;
+      box-shadow: none;
+    }
+
+    /* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
+    .looma-editor__mobile-toolbar-shell :scope[data-ui-editor-toolbar-state~="floating"] {
+      width: 100%;
+      max-width: none;
+      min-height: 100%;
+      padding: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      overscroll-behavior-inline: contain;
+      scroll-snap-type: x mandatory;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-editor-toolbar"]) to ([data-component]) {
+:scope > :where([data-slotted], [data-slotted] *):is(*) {
+      flex: 0 0 auto;
+    }
+
+    :where([data-slotted], [data-slotted] *):is(.divider) {
+      width: 1px;
+      height: 20px;
+      background: var(--ui-editor-toolbar-divider, var(--ui-border, #e5e7eb));
+      flex-shrink: 0;
+      margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
+    }
+
+    @media (max-width: 767px) {
+    }
+
+    /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
+
+    /* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-floating-action-button.css

@@ -0,0 +1,82 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-floating-action-button"]) to ([data-component], [data-slotted]) {
+:scope {
+      position: fixed;
+      inset-block-end: calc(var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom));
+      inset-inline-end: max(
+        var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem)),
+        env(safe-area-inset-right)
+      );
+      inline-size: var(--ui-floating-action-button-size, 56px);
+      block-size: var(--ui-floating-action-button-size, 56px);
+      display: inline-flex;
+      z-index: var(--ui-floating-action-button-z-index, 100);
+    }
+
+    :scope {
+      appearance: none;
+      border: none;
+      border-radius: 999px;
+      margin: 0;
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--ui-floating-action-button-bg, var(--ui-accent-solid));
+      color: var(--ui-floating-action-button-color, var(--ui-text-on-accent));
+      box-shadow: var(
+        --ui-floating-action-button-shadow,
+        0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)
+      );
+      cursor: pointer;
+      transition:
+        background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
+        transform var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
+        box-shadow var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+    }
+
+    :scope:hover:enabled {
+      background: var(--ui-floating-action-button-hover-bg, var(--ui-accent-hover));
+      box-shadow: var(
+        --ui-floating-action-button-hover-shadow,
+        0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)
+      );
+    }
+
+    :scope:active:enabled {
+      transform: scale(var(--ui-floating-action-button-active-scale, 0.94));
+    }
+
+    :scope:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline-offset: 2px;
+    }
+
+    :scope:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    @media (min-width: 768px) {
+      :scope[data-ui-floating-action-button-state~="mobileOnly"] {
+        display: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-floating-action-button"]) to ([data-component]) {
+:where([data-slotted], [data-slotted] *):is(svg) {
+      inline-size: var(--ui-floating-action-button-icon-size, 24px);
+      block-size: var(--ui-floating-action-button-icon-size, 24px);
+      flex-shrink: 0;
+    }
+
+    @media (min-width: 768px) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}