@citisen/litearea 0.1.0

package/dist/styles.css

@@ -0,0 +1,432 @@
+.litearea {
+  --litearea-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --litearea-font-size: 13px;
+  --litearea-line-height: 20px;
+  --litearea-padding-block: 6px;
+  --litearea-padding-inline: 10px;
+  --litearea-radius: 8px;
+  --litearea-fg: #1f2328;
+  --litearea-fg-dim: #6b7280;
+  --litearea-fg-strong: #111827;
+  --litearea-bg: #ffffff;
+  --litearea-bg-raised: #ffffff;
+  --litearea-border: #d8dbe0;
+  --litearea-border-focus: #4d6bfe;
+  --litearea-accent: #4d6bfe;
+  --litearea-accent-soft: rgba(77, 107, 254, 0.12);
+  --litearea-selection: rgba(77, 107, 254, 0.22);
+  --litearea-error: #e5484d;
+  --litearea-warning: #d97706;
+  --litearea-info: #4d6bfe;
+  --litearea-hint: #8b8f97;
+  --litearea-shadow: 0 6px 24px rgba(15, 23, 42, 0.14);
+
+  --litearea-scope-text: var(--litearea-fg);
+  --litearea-scope-word: var(--litearea-fg);
+  --litearea-scope-family: var(--litearea-fg);
+  --litearea-scope-family-generic: #7c3aed;
+  --litearea-scope-family-unknown: var(--litearea-warning);
+  --litearea-scope-family-unclosed: var(--litearea-error);
+  --litearea-scope-weight: var(--litearea-accent);
+  --litearea-scope-weight-missing: var(--litearea-warning);
+  --litearea-scope-state: var(--litearea-accent);
+  --litearea-scope-property: #7c3aed;
+  --litearea-scope-operator: var(--litearea-fg-dim);
+  --litearea-scope-separator: var(--litearea-fg-dim);
+  --litearea-scope-value-shape: #0f766e;
+  --litearea-scope-value-color: #0f766e;
+  --litearea-scope-value-pattern: #0f766e;
+  --litearea-scope-value-motion: #0f766e;
+  --litearea-scope-value-number: #b45309;
+  --litearea-scope-comment: var(--litearea-fg-dim);
+  --litearea-scope-invalid: var(--litearea-error);
+  --litearea-scope-keyword: var(--litearea-accent);
+  --litearea-scope-string: #0f766e;
+  --litearea-scope-number: #b45309;
+
+  position: relative;
+  display: block;
+  color: var(--litearea-fg);
+}
+
+@media (prefers-color-scheme: dark) {
+  .litearea {
+    --litearea-fg: #e6e8eb;
+    --litearea-fg-dim: #8b919b;
+    --litearea-fg-strong: #ffffff;
+    --litearea-bg: #1b1e24;
+    --litearea-bg-raised: #23262c;
+    --litearea-border: #363b44;
+  --litearea-scope-family-generic: #c4a2ff;
+  --litearea-scope-property: #c4a2ff;
+  --litearea-scope-value-shape: #5eead4;
+  --litearea-scope-value-color: #5eead4;
+  --litearea-scope-value-pattern: #5eead4;
+  --litearea-scope-value-motion: #5eead4;
+  --litearea-scope-value-number: #fbbf24;
+  --litearea-scope-string: #5eead4;
+  --litearea-scope-number: #fbbf24;
+    --litearea-error: #ff6b6b;
+    --litearea-warning: #f59e0b;
+    --litearea-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
+  }
+}
+
+/* ── the box ─────────────────────────────────────────────────────────────── */
+
+.litearea-box {
+  position: relative;
+  display: block;
+  border: 1px solid var(--litearea-border);
+  border-radius: var(--litearea-radius);
+  background: var(--litearea-bg);
+  transition: border-color 120ms ease;
+}
+
+.litearea-box:focus-within {
+  border-color: var(--litearea-border-focus);
+}
+
+.litearea-invalid .litearea-box {
+  border-color: var(--litearea-error);
+}
+
+/*
+ * The layer and the field share this rule and nothing may be added to one alone.
+ * Every property here is a property the mirror copies too — three elements, one
+ * typography, or the paint drifts.
+ */
+.litearea-layer,
+.litearea-input {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: var(--litearea-padding-block) var(--litearea-padding-inline);
+  border: none;
+  font-family: var(--litearea-font);
+  font-size: var(--litearea-font-size);
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-variant-ligatures: none;
+  font-kerning: none;
+  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
+  line-height: var(--litearea-line-height);
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-transform: none;
+  text-indent: 0;
+  text-align: left;
+  direction: ltr;
+  tab-size: 2;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.litearea-layer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+}
+
+/*
+ * When the box is clamped to its maximum height the field grows a scrollbar, and a
+ * scrollbar narrows the text. If the layer kept the full width it would wrap
+ * differently from the field and every colour would slide off its character, so the
+ * field's measured scrollbar width is published as --litearea-scrollbar and added
+ * here. The value is 0 whenever no scrollbar is shown.
+ */
+.litearea-layer {
+  padding-right: calc(var(--litearea-padding-inline) + var(--litearea-scrollbar, 0px));
+}
+
+.litearea-paint {
+  position: relative;
+  min-height: 100%;
+  /* A zero-width space keeps the layer's last line box as tall as the field's:
+     a trailing newline would otherwise collapse in the paint alone, and the box
+     would jump the moment one was typed. */
+  will-change: transform;
+}
+
+.litearea-input {
+  position: relative;
+  display: block;
+  resize: none;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--litearea-fg);
+  outline: none;
+  overflow-y: hidden;
+}
+
+.litearea-growable .litearea-input {
+  resize: none;
+}
+
+.litearea-resizable .litearea-input {
+  resize: vertical;
+}
+
+.litearea-input::placeholder {
+  color: var(--litearea-fg-dim);
+}
+
+.litearea-input::selection {
+  background: var(--litearea-selection);
+}
+
+.litearea-readonly .litearea-input {
+  caret-color: transparent;
+}
+
+/*
+ * The rules that spend the variables, generated from the same list that declares them. There is
+ * deliberately NO catch-all rule setting a property on every painted span: there was one, and a
+ * class plus an element outranks a bare class on specificity, so it silently switched off every
+ * squiggle in the library.
+ *
+ * A scope that is not in the list gets no colour from here, and a host writing a grammar of its
+ * own styles it with a plain rule — .litearea-scope-my-thing { color: … } — since nothing in
+ * this file competes for that selector.
+ */
+.litearea-scope-text { color: var(--litearea-scope-text); }
+.litearea-scope-word { color: var(--litearea-scope-word); }
+.litearea-scope-family { color: var(--litearea-scope-family); }
+.litearea-scope-family-generic { color: var(--litearea-scope-family-generic); }
+.litearea-scope-family-unknown { color: var(--litearea-scope-family-unknown); }
+.litearea-scope-family-unclosed { color: var(--litearea-scope-family-unclosed); }
+.litearea-scope-weight { color: var(--litearea-scope-weight); }
+.litearea-scope-weight-missing { color: var(--litearea-scope-weight-missing); }
+.litearea-scope-state { color: var(--litearea-scope-state); }
+.litearea-scope-property { color: var(--litearea-scope-property); }
+.litearea-scope-operator { color: var(--litearea-scope-operator); }
+.litearea-scope-separator { color: var(--litearea-scope-separator); }
+.litearea-scope-value-shape { color: var(--litearea-scope-value-shape); }
+.litearea-scope-value-color { color: var(--litearea-scope-value-color); }
+.litearea-scope-value-pattern { color: var(--litearea-scope-value-pattern); }
+.litearea-scope-value-motion { color: var(--litearea-scope-value-motion); }
+.litearea-scope-value-number { color: var(--litearea-scope-value-number); }
+.litearea-scope-comment { color: var(--litearea-scope-comment); }
+.litearea-scope-invalid { color: var(--litearea-scope-invalid); }
+.litearea-scope-keyword { color: var(--litearea-scope-keyword); }
+.litearea-scope-string { color: var(--litearea-scope-string); }
+.litearea-scope-number { color: var(--litearea-scope-number); }
+
+.litearea-dec-effective {
+  border-radius: 3px;
+  background: var(--litearea-accent-soft);
+  box-shadow: 0 0 0 1px var(--litearea-accent-soft);
+}
+
+/* The four shapes a diagnostic can take. Wavy for the two that mean "fix this", dotted for
+   the two that mean "worth knowing" — the same distinction VSCode draws, and the reason
+   severity is a class rather than an inline colour. */
+.litearea-diag-error {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--litearea-error);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+.litearea-diag-warning {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--litearea-warning);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+.litearea-diag-info {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--litearea-info);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+.litearea-diag-hint {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--litearea-hint);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+/* ── the completion list ─────────────────────────────────────────────────── */
+
+/*
+ * The container holds two things and scrolls NEITHER of them: the list scrolls itself, and the
+ * documentation is pinned below it. Putting the documentation inside the scroll range — which is
+ * what this used to do — makes it unreachable with a long list and a long explanation: the
+ * arrows move the active row rather than the scrollbar, so a keyboard user never sees it, and a
+ * mouse user has to scroll down to read it and back up to reach the next row.
+ */
+.litearea-popup {
+  position: absolute;
+  z-index: 30;
+  display: none;
+  flex-direction: column;
+  max-width: 460px;
+  padding: 4px;
+  border: 1px solid var(--litearea-border);
+  border-radius: 10px;
+  background: var(--litearea-bg-raised);
+  box-shadow: var(--litearea-shadow);
+  font-family: var(--litearea-font);
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--litearea-fg);
+  overflow: hidden;
+}
+
+.litearea-popup[data-open="true"] {
+  display: flex;
+}
+
+/* The rows, and the only part that scrolls. Its height is bounded so the documentation below
+   always has somewhere to live. */
+.litearea-list {
+  min-height: 0;
+  max-height: 208px;
+  overflow-y: auto;
+}
+
+/*
+ * The explanation, pinned. Its own height is bounded and it scrolls ITSELF, so a long
+ * explanation stays readable while the rows stay put — and arrowing to the next row swaps the
+ * text in place instead of requiring a scroll back up.
+ */
+.litearea-docs {
+  flex: none;
+  max-height: 132px;
+  overflow-y: auto;
+  margin: 4px -4px -4px;
+  padding: 6px 10px;
+  border-top: 1px solid var(--litearea-border);
+  background: var(--litearea-bg);
+  border-radius: 0 0 10px 10px;
+  color: var(--litearea-fg);
+  white-space: pre-wrap;
+}
+
+.litearea-popup[data-docs="false"] .litearea-docs {
+  display: none;
+}
+
+.litearea-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 3px 6px;
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.litearea-row[aria-selected="true"] {
+  background: var(--litearea-accent-soft);
+}
+
+.litearea-rowKind {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  background: var(--litearea-fg-dim);
+  transform: translateY(-1px);
+}
+
+.litearea-kind-family { background: var(--litearea-scope-family-generic); }
+.litearea-kind-generic { background: var(--litearea-scope-family-generic); }
+.litearea-kind-weight { background: var(--litearea-scope-weight); }
+.litearea-kind-state { background: var(--litearea-scope-state); }
+.litearea-kind-property { background: var(--litearea-scope-property); }
+.litearea-kind-value { background: var(--litearea-scope-value-shape); }
+.litearea-kind-number { background: var(--litearea-scope-value-number); }
+.litearea-kind-custom { background: var(--litearea-fg-dim); }
+
+.litearea-rowLabel {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.litearea-rowMatch {
+  color: var(--litearea-accent);
+  font-weight: 600;
+}
+
+.litearea-rowDetail {
+  flex: none;
+  color: var(--litearea-fg-dim);
+  font-size: 11px;
+}
+
+.litearea-docsTitle {
+  font-weight: 600;
+}
+
+.litearea-docsDetail {
+  color: var(--litearea-fg-dim);
+}
+
+.litearea-docsBody {
+  margin-top: 2px;
+  color: var(--litearea-fg-dim);
+}
+
+/* ── the hover tooltip ───────────────────────────────────────────────────── */
+
+.litearea-tooltip {
+  position: absolute;
+  z-index: 40;
+  display: none;
+  max-width: 340px;
+  padding: 6px 10px;
+  border: 1px solid var(--litearea-border);
+  border-radius: 8px;
+  background: var(--litearea-bg-raised);
+  box-shadow: var(--litearea-shadow);
+  font-family: var(--litearea-font);
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--litearea-fg);
+  pointer-events: none;
+  white-space: pre-wrap;
+}
+
+.litearea-tooltip[data-open="true"] {
+  display: block;
+}
+
+.litearea-tooltipTitle {
+  font-weight: 600;
+}
+
+.litearea-tooltipDetail {
+  color: var(--litearea-fg-dim);
+}
+
+.litearea-tooltipBody {
+  margin-top: 3px;
+  color: var(--litearea-fg-dim);
+}
+
+.litearea-srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}