@k2b/cloud 0.6.0-rc.0

package/src/styles/utilities-markdown-editor.css

@@ -0,0 +1,525 @@
+/* Markdown editor — overtype-style layered textarea + preview.
+
+   The textarea has `color: transparent` so its glyphs are invisible; only
+   the cursor (caret-color) and selection show through. The preview div
+   beneath renders the same text with markdown syntax highlighted. Identical
+   font / padding / whitespace / wrapping on both layers is REQUIRED for
+   the cursor to line up exactly with the visible glyphs in the preview.
+
+   All glyph-affecting properties on `.md-editor-layer` use `!important` to
+   defeat any cascading style that would shift the layers relative to each
+   other. No font-size, font-weight, or font-style is ever varied between
+   the textarea and inner preview spans — bold uses a text-shadow trick,
+   italic uses colour. Any real weight/style change risks glyph-width
+   drift even on nominally monospace fonts. */
+
+.md-editor {
+  --md-editor-hover: var(--ui-field-hover);
+  --md-editor-hover-border: var(--ui-field-hover-border);
+  position: relative;
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-radius-control);
+  background: var(--ui-field);
+  @apply transition-colors;
+  @apply overflow-hidden;
+  /* Recessed well — matches the `input` utility (default variant is field-shaped).
+     The `paper` variant below overrides this with a card bevel instead. */
+  box-shadow: var(--ui-control-recess);
+}
+
+.md-editor:hover {
+  border-color: var(--md-editor-hover-border, var(--ui-field-hover-border));
+  background: var(--md-editor-hover, var(--ui-field-hover));
+}
+
+.md-editor:focus-within {
+  border-color: var(--ui-field-focus-border);
+  background: var(--ui-field-focus);
+  box-shadow: var(--ui-focus);
+}
+
+.md-editor[data-variant="paper"] {
+  border-color: var(--ui-border);
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-surface);
+  /* Paper variant = a document surface, so it gets the card bevel (raised),
+     not the recess of the field variant. */
+  box-shadow: var(--ui-shadow-surface);
+}
+
+.md-editor[data-variant="paper"]:hover {
+  border-color: var(--ui-border);
+  background: var(--ui-surface);
+}
+
+.md-editor[data-variant="paper"]:focus-within {
+  border-color: var(--ui-field-focus-border);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-shadow-surface), var(--ui-focus);
+}
+
+.md-editor[data-variant="paper"] .md-editor-toolbar {
+  border-color: var(--ui-border);
+  background: var(--ui-surface);
+}
+
+.md-editor[data-variant="paper"] .md-editor-tool {
+  @apply hover:bg-zinc-100;
+  @apply dark:hover:bg-zinc-800;
+}
+
+.md-editor[data-disabled="true"] {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+/* Error state — red border, both unfocused and focused, mirroring how
+   the standard `.input` utility would visually signal an error. The
+   error MESSAGE itself is rendered separately by `InputWrapper` below
+   the editor. */
+.md-editor[data-error="true"],
+.md-editor[data-error="true"]:focus-within {
+  @apply border-red-400 dark:border-red-500;
+}
+
+/* Toolbar bar above the editor surface */
+.md-editor-toolbar {
+  @apply flex items-center gap-0.5 flex-wrap;
+  @apply px-1.5 py-1;
+  border-bottom: 1px solid var(--ui-divider);
+}
+
+.md-editor:focus-within .md-editor-toolbar {
+  border-color: var(--ui-divider);
+}
+
+.md-editor-tool {
+  @apply inline-flex items-center justify-center;
+  @apply w-7 h-7 rounded;
+  @apply text-zinc-500 dark:text-zinc-400;
+  @apply hover:bg-zinc-200 hover:text-zinc-800;
+  @apply dark:hover:bg-zinc-700 dark:hover:text-zinc-100;
+  @apply transition-colors;
+  font-size: 0.95rem;
+}
+
+/* Active formatting at the caret — blue tint + faint blue background
+   so the active state is unmistakable at a glance, without becoming
+   visually loud. Hover on an active button keeps the blue surface
+   tone (not the zinc one) so the colour doesn't flicker. */
+.md-editor-tool[aria-pressed="true"] {
+  @apply text-blue-600 bg-blue-50;
+  @apply dark:text-blue-400 dark:bg-blue-950/40;
+}
+
+.md-editor-tool[aria-pressed="true"]:hover {
+  @apply bg-blue-100 text-blue-700;
+  @apply dark:bg-blue-900/40 dark:text-blue-300;
+}
+
+.md-editor-tool-sep {
+  @apply w-px h-4 bg-zinc-300 dark:bg-zinc-600 mx-1;
+}
+
+/* The two stacked layers. The wrapper has explicit height (set inline
+   via style="--md-h: ...em") so both layers can size to it via 100%. */
+.md-editor-surface {
+  position: relative;
+  height: var(--md-h, 8rem);
+}
+
+/* Fill mode — the editor stretches to its (flex) parent instead of a
+   line-count height. Used by IDE-style hosts like the file browser. */
+.md-editor[data-fill="true"] {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.md-editor[data-fill="true"] .md-editor-surface {
+  flex: 1;
+  min-height: 0;
+  height: auto;
+}
+
+.md-editor-layer {
+  /* These properties MUST be identical on textarea and preview.
+     `!important` because user-agent textarea defaults + any stray rule
+     could otherwise shift one layer relative to the other.
+
+     Bold + italic are NOT done via font-weight / font-style on this
+     layer — see the rules further down. We rely on text-shadow for
+     fake-bold and colour-only for italic so the glyph advance widths
+     stay identical between the textarea and the preview. */
+  position: absolute !important;
+  inset: 0 !important;
+  display: block !important;
+
+  /* Typography — identical glyph metrics on both layers.
+     Every property here is locked down so the textarea and preview
+     can never disagree on glyph advance widths. The four critical
+     subtleties:
+       1. `font-synthesis: none` — only-loaded weights (400/500/600
+          for IBM Plex Mono) get used. Asking for 700 would synthesise
+          a faux-bold, and synthesised bold does NOT preserve mono
+          glyph widths.
+       2. `font-variant-ligatures: none` + `font-feature-settings`
+          disable ligatures (`==` → `≡` etc.) and contextual
+          alternates. Both reshape glyph runs and break alignment.
+       3. `letter-spacing: 0` (NOT `normal`) — `normal` lets the font
+          decide and some shells inject a fractional value.
+       4. `text-rendering: geometricPrecision` — disables kerning so
+          even non-monospace fallback fonts don't shift glyph X
+          positions across layers. */
+  /* IBM Plex Mono is shipped via `/public/fonts.css` (regular + italic +
+     500 + 600 weights). Pinning the font here means the
+     editor looks identical across OSes and we control the italic
+     variant precisely. The bold/heading "weight" is faked via
+     text-shadow further down so we never actually request a weight
+     the loaded font lacks. The trailing `monospace` is a last-ditch
+     fallback if Plex Mono ever fails to load. */
+  font-family: "IBM Plex Mono", monospace !important;
+  font-size: 0.875rem !important; /* 14px */
+  line-height: 1.55 !important;
+  font-weight: 400 !important;
+  font-style: normal !important;
+  font-variant: normal !important;
+  font-variant-ligatures: none !important;
+  font-variant-numeric: tabular-nums !important;
+  font-variant-position: normal !important;
+  font-stretch: normal !important;
+  font-kerning: none !important;
+  font-synthesis: none !important;
+  -webkit-font-synthesis: none !important;
+  font-feature-settings:
+    "liga" 0,
+    "clig" 0,
+    "calt" 0 !important;
+  font-variation-settings: normal !important;
+  font-optical-sizing: none !important;
+  letter-spacing: 0 !important;
+  word-spacing: 0 !important;
+  text-align: left !important;
+  text-indent: 0 !important;
+  text-transform: none !important;
+  text-rendering: geometricPrecision !important;
+
+  /* Box model */
+  padding: 0.625rem 0.75rem !important;
+  margin: 0 !important;
+  border: 0 !important;
+  outline: 0 !important;
+  box-sizing: border-box !important;
+
+  /* Whitespace + wrapping — must agree on every char position */
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  word-break: normal !important;
+  overflow-wrap: break-word !important;
+  tab-size: 2 !important;
+  -moz-tab-size: 2 !important;
+
+  /* Sizing */
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  min-width: 0 !important;
+  max-width: none !important;
+
+  /* Scrolling — both layers must reserve scrollbar space identically
+     or the content widths diverge and long lines wrap at different
+     columns. We force `overflow-y: scroll` on both so the gutter is
+     always present. The textarea shows its native scrollbar; the
+     preview's scrollbar is rendered but painted transparent (see
+     `.md-editor-preview` block) — the gutter stays, the visual goes. */
+  overflow-y: scroll !important;
+  overflow-x: hidden !important;
+  scrollbar-width: thin !important;
+
+  /* Background neutralised — wrapper owns the surface color */
+  background: transparent !important;
+
+  /* No animations that could shift glyph position */
+  animation: none !important;
+  transition: none !important;
+}
+
+.md-editor-input {
+  z-index: 2 !important;
+  resize: none !important;
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  /* Hide own glyphs, show only cursor.
+     `caret-color` must be an explicit colour, NOT `currentColor` — the
+     textarea's own `color` is `transparent`, so `currentColor` would
+     resolve to transparent and the cursor would vanish. We mirror the
+     preview's prose colour (zinc-900 light / zinc-100 dark). */
+  color: transparent !important;
+  -webkit-text-fill-color: transparent !important;
+  caret-color: #18181b !important; /* zinc-900 */
+  /* Prevent mobile double-tap zoom */
+  touch-action: manipulation !important;
+}
+
+.dark .md-editor-input {
+  caret-color: #f4f4f5 !important; /* zinc-100 */
+}
+
+/* Selection background visible even with transparent glyphs */
+.md-editor-input::selection {
+  background: rgb(59 130 246 / 0.35);
+  color: transparent;
+}
+
+.md-editor-preview {
+  z-index: 1 !important;
+  /* Click + selection happen on the textarea, not here */
+  pointer-events: none !important;
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  @apply text-zinc-900 dark:text-zinc-100;
+  /* Paint the preview's scrollbar transparent so only the textarea's
+     scrollbar (sitting on top, z-index: 2) is visible. We CAN'T set
+     `scrollbar-width: none` here — that would also remove the gutter
+     and the preview's content width would no longer match the
+     textarea's, breaking wrap alignment. The transparent-colour trick
+     preserves the gutter while hiding the visual. */
+  scrollbar-color: transparent transparent !important;
+}
+
+.md-editor-preview::-webkit-scrollbar-thumb,
+.md-editor-preview::-webkit-scrollbar-track,
+.md-editor-preview::-webkit-scrollbar-corner {
+  background: transparent !important;
+  border: 0 !important;
+}
+
+/* Critical alignment safeguard (overtype lesson, styles.js:256-264):
+   force EVERY descendant inside the preview to inherit font-family,
+   font-size, and line-height from the preview itself. Without this,
+   external CSS (Tailwind base, @tailwindcss/typography, etc.) can
+   set element-specific font-size on, say, `<span>` or implicit
+   `<h2>` elements. Any such per-element metric difference inflates
+   the line-box height and drifts the overlay relative to the
+   textarea — visible as a "cursor far to the right of the visible
+   text" symptom. Also reset margin/padding/border so no inner
+   element can add box-model space the textarea doesn't have. */
+.md-editor-preview *,
+.md-editor-preview *::before,
+.md-editor-preview *::after {
+  font-family: inherit !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+  font-stretch: inherit !important;
+  letter-spacing: inherit !important;
+  word-spacing: inherit !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  text-indent: 0 !important;
+  vertical-align: baseline !important;
+  display: inline !important;
+}
+
+/* Placeholder shim — shown when the textarea is empty. MUST use the
+   exact same typography stack as `.md-editor-layer` so the cursor
+   position doesn't visibly jump when the first character is typed
+   and the placeholder fades out. */
+.md-editor-placeholder {
+  position: absolute !important;
+  inset: 0 !important;
+  padding: 0.625rem 0.75rem !important;
+  font-family: "IBM Plex Mono", monospace !important;
+  font-size: 0.875rem !important;
+  line-height: 1.55 !important;
+  font-weight: 400 !important;
+  letter-spacing: 0 !important;
+  word-spacing: 0 !important;
+  pointer-events: none !important;
+  user-select: none !important;
+  z-index: 0 !important;
+  @apply text-zinc-400 dark:text-zinc-500;
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  word-break: normal !important;
+  overflow-wrap: break-word !important;
+}
+
+/* Syntax highlighting classes — applied INSIDE the preview div by the
+   highlighter. Each rule must preserve glyph width (monospace font does
+   the heavy lifting; we only change weight, color, background). */
+
+/* The visible markdown syntax characters (**, #, -, >, etc.) — kept
+   on-screen but dimmed so prose stands out. */
+.md-syntax,
+.md-marker {
+  @apply text-zinc-400 dark:text-zinc-500;
+}
+
+/* Bold + headers via `text-shadow` instead of `font-weight`.
+
+   Why: any font-weight change risks glyph-advance-width drift between
+   the textarea (locked at weight 400) and the preview. Even nominal
+   monospace fonts can have subtle weight-dependent width changes,
+   especially in browser rasterisers. `text-shadow: 0.5px 0 0
+   currentColor` paints a copy of each glyph 0.5px to the right —
+   visually equivalent to a heavier stroke, but the underlying glyph
+   advance is UNCHANGED. The cursor in the textarea (running at
+   weight 400) lines up perfectly with the visibly "bold" glyphs in
+   the preview because they ARE rendered at weight 400 underneath.
+
+   Italics: same logic — `font-style: italic` swaps in a different
+   font face whose glyph metrics may not perfectly match upright. We
+   simulate italic via colour + a transparent overlay we can't get
+   in CSS, so for italic we accept a colour-only differentiation. */
+.md-h1,
+.md-h2,
+.md-h3,
+.md-bold {
+  text-shadow: 0.5px 0 0 currentColor;
+}
+
+/* Slight tonal ladder so the heading levels are still distinguishable
+   at a glance, even though they share the same weight + size. */
+.md-h1 {
+  @apply text-zinc-950 dark:text-white;
+}
+
+.md-h2 {
+  @apply text-zinc-900 dark:text-zinc-50;
+}
+
+.md-h3 {
+  @apply text-zinc-800 dark:text-zinc-200;
+}
+
+/* Italic: real `font-style: italic`. IBM Plex Mono Italic 400 is
+   loaded as a separate face (see global.css) and is designed as
+   monospace — its glyph advance widths match the regular face. The
+   `!important` defeats the layer-level `font-style: normal !important`
+   so the .md-italic span actually picks up italic. */
+.md-italic {
+  font-style: italic !important;
+}
+
+/* Inline code — background only, no width change.
+   Negative padding would break alignment; we just paint behind the
+   glyphs and accept that the highlight doesn't have inset. */
+.md-code {
+  @apply bg-zinc-200/60 dark:bg-zinc-700/50 rounded-sm;
+}
+
+/* Links — color + underline, both width-safe */
+.md-link {
+  @apply text-blue-600 dark:text-blue-400 underline;
+  text-underline-offset: 2px;
+}
+
+/* Rendered links use one anchor for their complete visible hit area. */
+.md-link-widget {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.125rem;
+  color: inherit;
+  font-weight: 600;
+  text-decoration: none;
+  transition: color 150ms ease;
+}
+
+.md-link-widget:hover {
+  color: var(--ui-app-accent-text);
+}
+
+.md-link-widget:focus-visible {
+  border-radius: 0.125rem;
+  outline: 2px solid var(--ui-app-accent-border);
+  outline-offset: 2px;
+}
+
+.md-link-icon {
+  opacity: 0.7;
+  transition: opacity 150ms ease;
+}
+
+.md-link-widget:hover .md-link-icon,
+.md-link-widget:focus-visible .md-link-icon {
+  opacity: 1;
+}
+
+/* Blockquote — color + inset box-shadow for the left bar (box-shadow
+   doesn't affect layout, unlike border-left or padding-left). The bar
+   sits visually outside the text column edge so prose stays aligned. */
+.md-quote {
+  @apply text-zinc-600 dark:text-zinc-400;
+  box-shadow: inset 3px 0 0 var(--color-zinc-300);
+}
+
+.dark .md-quote {
+  box-shadow: inset 3px 0 0 var(--color-zinc-600);
+}
+
+/* Fenced code lines — background only */
+.md-code-block {
+  @apply bg-zinc-200/40 dark:bg-zinc-800;
+}
+
+.md-code-block pre,
+.md-mermaid-block,
+.md-katex-block {
+  border: 1px solid rgb(228 228 231 / 0.72) !important;
+  border-radius: 0.42rem !important;
+  background: color-mix(in oklab, white 92%, rgb(244 244 245)) !important;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.46),
+    inset 0 -1px 0 rgb(0 0 0 / 0.025);
+}
+
+.md-katex-block {
+  padding: 0.75rem;
+}
+
+.dark .md-code-block pre,
+.dark .md-mermaid-block,
+.dark .md-katex-block {
+  border-color: rgb(63 63 70 / 0.72) !important;
+  background: color-mix(in oklab, rgb(24 24 27) 90%, rgb(39 39 42)) !important;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.045),
+    inset 0 -1px 0 rgb(0 0 0 / 0.28);
+}
+
+/* Horizontal rule (---) — just dim the marker; can't draw an actual
+   rule line without inserting layout-shifting elements. */
+.md-hr {
+  @apply text-zinc-400 dark:text-zinc-500;
+}
+
+/* Completion match — every occurrence of a registered completion
+   label (abbreviation or trigger result) is tinted blue so the
+   reader can see what's a recognised mention vs. plain prose.
+   No underline: a dotted underline reads too much like a spellcheck
+   squiggle and trips people into thinking something's broken. */
+.md-completion-match {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+/* Stats footer — lines / words / chars, anchored at the bottom-left
+   of the editor. No border, no background tint — it inherits the
+   editor body colour and sits as a quiet meta-row separated from the
+   content only by its dim mono text and a hair of padding.
+   When the editor is empty we keep the element rendered (so the
+   editor's outer height stays constant — no layout shift across all
+   sibling fields when the user starts / clears typing) but flip
+   `visibility: hidden` to remove the stats from sight. */
+.md-editor-stats {
+  @apply flex justify-start items-center gap-3;
+  @apply px-3 py-1;
+  @apply text-[10px] text-zinc-400 dark:text-zinc-500;
+  @apply font-mono select-none;
+  letter-spacing: 0.02em;
+}
+
+.md-editor-stats[data-empty="true"] {
+  visibility: hidden;
+}