@cychien/ezdesign 0.0.0-stage → 0.9.1

package/dist/overlay.css

@@ -0,0 +1,422 @@
+/* src/client/overlay.css */
+[data-ez-mode=element]:not([data-ez-pick]),
+[data-ez-mode=element]:not([data-ez-pick]) *:not([data-ez-ui], [data-ez-ui] *) {
+  cursor: pointer !important;
+}
+[data-ez-mode=region]:not([data-ez-pick]),
+[data-ez-mode=region]:not([data-ez-pick]) *:not([data-ez-ui], [data-ez-ui] *) {
+  cursor: crosshair !important;
+}
+[data-ez-pick-hot],
+[data-ez-pick-hot] *:not([data-ez-ui], [data-ez-ui] *) {
+  cursor: pointer !important;
+}
+[data-ez-framing],
+[data-ez-framing] *:not([data-ez-ui], [data-ez-ui] *) {
+  cursor: crosshair !important;
+}
+.ez-popup {
+  cursor: auto;
+}
+.ez-input {
+  cursor: text;
+}
+.ez-marker {
+  cursor: default;
+}
+[data-ez-ui],
+[data-ez-ui] * {
+  box-sizing: border-box;
+}
+[data-ez-ui] {
+  --ez-paper-sunken: #f2f0e9;
+  --ez-paper-edge: #e9e6dd;
+  --ez-ink: #171717;
+  --ez-ink-muted: #6e6e6e;
+  --ez-ink-faint: #878787;
+  --ez-ink-ghost: #b3b3b3;
+  --ez-ring: #b3b3b3;
+  --ez-ring-halo: color-mix(in oklab, var(--ez-ink) 12%, transparent);
+  --ez-mark: #e56d41;
+  --ez-attach: #cee7c1;
+  --ez-attach-ink: #3d5c36;
+  --ez-ref: #f4d3e2;
+  --ez-ref-ink: #7b3a5c;
+  --ez-ref-accent: #cf5f92;
+  --ez-explore-ink: #5e3f8c;
+  --ez-explore-accent: #6b3baa;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Noto Sans TC",
+    sans-serif;
+}
+.ez-highlight {
+  position: fixed;
+  z-index: 2147483600;
+  pointer-events: none;
+  border: 3px solid var(--ez-mark);
+  border-radius: 4px;
+  background: color-mix(in oklab, var(--ez-mark) 10%, transparent);
+  box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.6), inset 0 0 0 1px oklch(100% 0 0 / 0.6);
+  display: none;
+}
+.ez-selection {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483599;
+  pointer-events: none;
+}
+.ez-selection-band {
+  position: fixed;
+  border-radius: 2px;
+  background: color-mix(in oklab, var(--ez-mark) 30%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ez-mark) 45%, transparent);
+}
+.ez-pin {
+  position: fixed;
+  z-index: 2147483602;
+  pointer-events: none;
+  width: 14px;
+  height: 14px;
+  margin: -7px 0 0 -7px;
+  border-radius: 50%;
+  background: var(--ez-mark);
+  border: 2.5px solid #fff;
+  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.35), 0 0 0 4px color-mix(in oklab, var(--ez-mark) 22%, transparent);
+  display: none;
+  transform-origin: center;
+  transform: scale(var(--ez-ui-scale, 1));
+}
+.ez-badge {
+  position: fixed;
+  z-index: 2147483601;
+  pointer-events: none;
+  background: var(--ez-ink);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.6;
+  padding: 2px 8px;
+  border-radius: 5px;
+  box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.25);
+  max-width: calc(60vw / var(--ez-ui-scale, 1));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: none;
+  transform-origin: top left;
+  transform: scale(var(--ez-ui-scale, 1));
+}
+.ez-markers {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2147483599;
+  pointer-events: none;
+}
+.ez-marker {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--ez-mark);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 20px;
+  text-align: center;
+  box-shadow: 0 0 0 2px oklch(100% 0 0 / 0.85);
+  pointer-events: auto;
+  transform-origin: center;
+  transform: scale(var(--ez-ui-scale, 1));
+}
+.ez-select-btn {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  z-index: 2147483602;
+  background: var(--ez-ink);
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  cursor: pointer;
+  box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.25), 0 2px 8px oklch(0% 0 0 / 0.3);
+  transform-origin: top left;
+  transform: scale(var(--ez-ui-scale, 1));
+}
+.ez-popup {
+  position: fixed;
+  z-index: 2147483603;
+  width: 300px;
+  max-width: calc((100vw - 24px) / var(--ez-ui-scale, 1));
+  transform-origin: top left;
+  transform: scale(var(--ez-ui-scale, 1));
+  background: #fff;
+  color: var(--ez-ink);
+  border: 1px solid var(--ez-paper-edge);
+  border-radius: 14px;
+  box-shadow: 0 12px 32px oklch(0% 0 0 / 0.12), 0 2px 8px oklch(0% 0 0 / 0.06);
+  padding: 8px;
+}
+.ez-attach-field {
+  border: 1px solid var(--ez-paper-edge);
+  border-radius: 10px;
+  padding: 7px 9px;
+  background: var(--ez-paper-sunken);
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+.ez-attach-field[data-drop] {
+  background: var(--ez-paper-edge);
+}
+.ez-input {
+  display: block;
+  position: relative;
+  min-height: 58px;
+  max-height: 180px;
+  overflow-y: auto;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--ez-ink);
+  white-space: pre-wrap;
+  word-break: break-word;
+  outline: none;
+  overscroll-behavior: contain;
+}
+.ez-input[data-empty]::before {
+  content: attr(data-placeholder);
+  position: absolute;
+  inset: 0 0 auto 0;
+  color: var(--ez-ink-faint);
+  pointer-events: none;
+}
+.ez-attach-field:focus-within {
+  border-color: var(--ez-ring);
+  outline: 3px solid var(--ez-ring-halo);
+  outline-offset: 0;
+}
+.ez-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  max-width: 180px;
+  vertical-align: baseline;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--ez-attach);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.55;
+  color: var(--ez-attach-ink);
+  white-space: nowrap;
+  user-select: none;
+  cursor: default;
+}
+.ez-chip-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.ez-chip svg {
+  flex-shrink: 0;
+}
+.ez-chip-ref {
+  background: var(--ez-ref);
+  color: var(--ez-ref-ink);
+}
+.ez-chip-ref.ez-chip-chosen svg {
+  color: var(--ez-explore-accent);
+}
+.ez-chip-pending {
+  opacity: 0.55;
+}
+.ez-attach-error {
+  margin-top: 4px;
+  font-size: 11px;
+  line-height: 1.5;
+  color: oklch(52% 0.2 25);
+}
+.ez-slash-menu {
+  position: fixed;
+  z-index: 2147483604;
+  min-width: 240px;
+  max-width: 300px;
+  padding: 4px 4px 5px;
+  border-radius: 10px;
+  background: #fff;
+  border: 1px solid var(--ez-paper-edge);
+  cursor: auto;
+  box-shadow: 0 12px 32px oklch(0% 0 0 / 0.12), 0 2px 8px oklch(0% 0 0 / 0.06);
+}
+.ez-slash-head {
+  padding: 7px 10px 5px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--ez-ink-faint);
+}
+.ez-slash-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--ez-ink);
+}
+.ez-slash-item[data-active] {
+  background: var(--ez-paper-sunken);
+}
+.ez-slash-item svg {
+  flex-shrink: 0;
+  color: var(--ez-ink-muted);
+}
+.ez-slash-label {
+  font-size: 13px;
+  line-height: 1;
+  white-space: nowrap;
+}
+.ez-slash-hint {
+  margin-left: auto;
+  padding-left: 14px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: var(--ez-ink-faint);
+}
+.ez-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 6px;
+}
+.ez-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: none;
+  background: transparent;
+  color: var(--ez-ink-muted);
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+.ez-btn:hover {
+  background: var(--ez-paper-sunken);
+}
+.ez-btn-primary {
+  background: var(--ez-ink);
+  color: #fff;
+  font-weight: 600;
+}
+.ez-btn-primary:hover {
+  background: var(--ez-ink);
+  opacity: 0.88;
+}
+.ez-popup[data-ez-hidden] {
+  display: none;
+}
+[data-ez-pick] .ez-highlight {
+  border-color: var(--ez-ref-accent);
+  background: color-mix(in oklab, var(--ez-ref-accent) 10%, transparent);
+}
+[data-ez-pick] .ez-badge {
+  background: var(--ez-ref-accent);
+}
+.ez-region {
+  position: fixed;
+  z-index: 2147483598;
+  pointer-events: none;
+  display: none;
+  border: 1px dashed var(--ez-ref-accent);
+  background: color-mix(in oklab, var(--ez-ref-accent) 9%, transparent);
+}
+.ez-region-size {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  transform-origin: top right;
+  transform: scale(var(--ez-ui-scale, 1));
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--ez-ref-accent);
+  color: #fff;
+  font-size: 10.5px;
+  font-weight: 600;
+  line-height: 1.6;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.ez-region-size[data-ez-inside] {
+  top: auto;
+  bottom: 4px;
+  margin: 0 4px 0 0;
+}
+[data-ez-mode=region]:not([data-ez-pick]) .ez-region {
+  border-color: var(--ez-mark);
+  background: color-mix(in oklab, var(--ez-mark) 9%, transparent);
+}
+[data-ez-mode=region]:not([data-ez-pick]) .ez-region-size {
+  background: var(--ez-mark);
+}
+.ez-popup-notice {
+  margin-bottom: 8px;
+  padding: 7px 9px;
+  border-radius: 6px;
+  background: oklch(96% 0.045 85);
+  color: oklch(43% 0.1 70);
+  font-size: 11.5px;
+  line-height: 1.55;
+}
+[data-ez-swapped] {
+  display: none !important;
+}
+ez-variant {
+  display: contents;
+}
+.ez-explore-head {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 4px;
+  color: var(--ez-explore-ink);
+}
+.ez-explore-head[hidden] {
+  display: none;
+}
+.ez-explore-title {
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+.ez-popup-explore .ez-btn-primary {
+  background: var(--ez-explore-accent);
+}
+.ez-popup-explore .ez-btn-primary:hover {
+  background: var(--ez-explore-accent);
+  opacity: 0.88;
+}
+.ez-popup-explore .ez-attach-field {
+  padding-top: 6px;
+}
+.ez-popup-explore .ez-attach-field:focus-within {
+  border-color: color-mix(in oklab, var(--ez-explore-accent) 45%, var(--ez-paper-edge));
+  outline-color: color-mix(in oklab, var(--ez-explore-accent) 12%, transparent);
+}
+.ez-popup-explore .ez-btn-primary [hidden] {
+  display: none;
+}