@ecsplico/editor 0.0.0-stage → 1.0.0

package/dist/styles/composites.css

@@ -0,0 +1,56 @@
+/* Styles of the composite feature (`@ecsplico/editor/composites`); import after `core.css`. */
+/* Composite block: title, then description and tags row (data, hidden: the chips and the details popover of
+   `CompositeChrome` show and edit them), then the body. */
+@layer components {
+  .tiptap .composite {
+    position: relative;
+    margin: 1.25em 0;
+    padding-left: 1.25rem;
+    border-left: 2px solid var(--sk-border);
+  }
+  .tiptap .composite .composite { margin: 1em 0; }
+  .tiptap .composite .composite .composite { margin: 0.75em 0; padding-left: 1rem; border-left-width: 1px; }
+  /* Anchor of the kind icon on the left border; `CompositeChrome` measures it and lays the icon (button and drag handle)
+     over it, so it draws nothing and takes no pointer events. Its centre sits on the centre of the title's first line
+     (the title's top margin collapses into the composite's, line-height 1.25), the line the drag handle centres on:
+     top = title font-size × 0.625 − half the toggle's height. */
+  .tiptap .composite__toggle {
+    position: absolute;
+    left: -0.75rem;
+    top: calc(1.5rem * 0.625 - 0.625rem);
+    width: 1.25rem;
+    height: 1.25rem;
+    pointer-events: none;
+  }
+  /* Toggle top follows the title size of its own nesting depth (see the title scale below). */
+  .tiptap .composite .composite > .composite__toggle { top: calc(1.25rem * 0.625 - 0.625rem); }
+  .tiptap .composite .composite .composite > .composite__toggle { top: calc(1.125rem * 0.625 - 0.625rem); }
+  .tiptap .composite .composite .composite .composite > .composite__toggle { top: calc(1rem * 0.625 - 0.625rem); }
+  .tiptap .composite .composite .composite .composite .composite > .composite__toggle { top: calc(0.9375rem * 0.625 - 0.625rem); }
+  .tiptap .composite .composite .composite .composite .composite .composite > .composite__toggle { top: calc(0.875rem * 0.625 - 0.625rem); }
+  /* Title scale for six nesting levels; ascending depth so the deepest matching rule wins. */
+  .tiptap .composite-title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 0.25em 0; }
+  .tiptap .composite .composite .composite-title { font-size: 1.25rem; font-weight: 600; }
+  .tiptap .composite .composite .composite .composite-title { font-size: 1.125rem; }
+  .tiptap .composite .composite .composite .composite .composite-title { font-size: 1rem; }
+  .tiptap .composite .composite .composite .composite .composite .composite-title { font-size: 0.9375rem; }
+  .tiptap .composite .composite .composite .composite .composite .composite .composite-title { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.02em; }
+  /* Description and tags rows are data only: the chips and the details popover of `CompositeChrome` show and edit them. */
+  .tiptap .composite-description,
+  .tiptap .composite-tags { display: none; }
+  /* Placeholder extension marks an empty title `is-empty`; the text is the kind's, set by CompositeView. */
+  .tiptap .composite-title.is-empty::before {
+    color: var(--sk-fg-dimmed);
+    float: left;
+    height: 0;
+    pointer-events: none;
+    content: var(--composite-title-placeholder, '');
+  }
+  /* Details popover on the kind icon: scale and fade in from the icon (Reka sets `transform-origin`). `CompositeChrome`
+     assigns the animations through utilities, which outrank this layer, hence `!important` for reduced motion. */
+  @keyframes composite-pop-in { from { opacity: 0; transform: scale(0.94); } }
+  @keyframes composite-pop-out { to { opacity: 0; transform: scale(0.96); } }
+  @media (prefers-reduced-motion: reduce) {
+    .composite-popover { animation: none !important; }
+  }
+}

package/dist/styles/core.css

@@ -0,0 +1,99 @@
+/* Core editor styles: the `.tiptap` surface, hand-written typography (@tailwindcss/typography is not installed) and
+   BlockFlash. Feature styles live in their own files. Import after `tailwindcss` and the UI kit's stylesheet (`vue/kit/nuxt-ui.css`, `vue/kit/primevue.css`). */
+
+@import './tokens.css';
+
+/* Editor tokens beyond the shared `--sk-*` set (`tokens.css`). Every stylesheet of the package reads `--sk-*` only; a UI
+   kit maps them onto its own variables (`vue/kit/nuxt-ui.css`: `--ui-*`, `vue/kit/primevue.css`: `--p-*`, the React
+   `react/styles/ui-vars.css`: shadcn). These defaults derive from the shared tokens, so an app without a kit sheet
+   still gets a coherent look. Declared under `:where()` (specificity 0), a kit's or the host's rule always wins. */
+:where(:root) {
+  --sk-bg-elevated: color-mix(in oklab, var(--sk-fg) 5%, var(--sk-bg));
+  --sk-bg-accented: color-mix(in oklab, var(--sk-fg) 10%, var(--sk-bg));
+  --sk-fg-highlighted: var(--sk-fg);
+  --sk-fg-toned: color-mix(in oklab, var(--sk-fg) 70%, var(--sk-muted));
+  --sk-fg-dimmed: color-mix(in oklab, var(--sk-muted) 65%, var(--sk-bg));
+  --sk-border-accented: color-mix(in oklab, var(--sk-fg) 18%, var(--sk-border));
+  --sk-info: var(--sk-primary);
+}
+.tiptap {
+  outline: none;
+  min-height: 40vh;
+  padding-left: 2rem;
+}
+
+/* In the components layer so Tailwind utilities (e.g. segment layout margins) still win. */
+@layer components {
+  .tiptap { line-height: 1.7; color: var(--sk-fg); }
+  .tiptap p { margin: 0.5em 0; }
+  .tiptap h1, .tiptap h2, .tiptap h3, .tiptap h4, .tiptap h5, .tiptap h6 {
+    color: var(--sk-fg-highlighted);
+    font-weight: 700;
+    line-height: 1.25;
+    margin: 1.4em 0 0.5em;
+  }
+  .tiptap h1 { font-size: 1.875rem; font-weight: 700; }
+  .tiptap h2 { font-size: 1.5rem; font-weight: 700; }
+  .tiptap h3 { font-size: 1.25rem; font-weight: 600; }
+  .tiptap h4 { font-size: 1.125rem; font-weight: 600; }
+  .tiptap h5 { font-size: 1rem; font-weight: 600; }
+  .tiptap h6 { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
+  .tiptap > :first-child { margin-top: 0; }
+  .tiptap ul, .tiptap ol { padding-left: 1.5rem; margin: 0.5em 0; }
+  .tiptap ul { list-style: disc; }
+  .tiptap ol { list-style: decimal; }
+  .tiptap li > p { margin: 0.2em 0; }
+  .tiptap li::marker { color: var(--sk-muted); }
+  .tiptap blockquote {
+    border-left: 3px solid var(--sk-border-accented);
+    padding-left: 1rem;
+    margin: 0.75em 0;
+    color: var(--sk-fg-toned);
+    font-style: italic;
+  }
+  .tiptap code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    background: var(--sk-bg-elevated);
+    border-radius: 0.25rem;
+    padding: 0.1em 0.3em;
+  }
+  .tiptap pre {
+    font-family: var(--font-mono);
+    font-size: 0.875rem;
+    background: var(--sk-bg-elevated);
+    color: var(--sk-fg);
+    border: 1px solid var(--sk-border);
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    margin: 0.75em 0;
+    overflow-x: auto;
+  }
+  .tiptap pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
+  /* `OpaqueFence`: a `:::` fence of an unknown kind, shown as the verbatim text it is written back as. */
+  .tiptap pre.sk-opaque-fence { border-style: dashed; color: var(--sk-muted); }
+  .tiptap pre.sk-opaque-fence code { white-space: pre-wrap; }
+  .tiptap pre.sk-opaque-fence.ProseMirror-selectednode { border-color: var(--sk-primary); }
+  .tiptap hr { border: none; border-top: 1px solid var(--sk-border); margin: 1.5em 0; }
+  .tiptap hr.ProseMirror-selectednode { border-top-color: var(--sk-primary); }
+  /* The `/query` being typed while the slash menu (or a mention/tag popup) is open. */
+  .tiptap .suggestion { color: var(--sk-primary); }
+}
+
+/* BlockFlash: a block revealed by `revealBlock` (outline click, chat quote link; local node decoration). Duration = FLASH_MS in block-flash.ts. */
+@layer components {
+  .tiptap .block-flash {
+    border-radius: var(--sk-radius);
+    animation: block-flash 1.6s ease-out;
+  }
+  /* Revealing again flips to an identical animation under another name, which restarts it. */
+  .tiptap .block-flash--alt { animation-name: block-flash-alt; }
+  @keyframes block-flash {
+    0%, 35% { background-color: color-mix(in oklab, var(--sk-primary) 22%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sk-primary) 22%, transparent); }
+    100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; }
+  }
+  @keyframes block-flash-alt {
+    0%, 35% { background-color: color-mix(in oklab, var(--sk-primary) 22%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sk-primary) 22%, transparent); }
+    100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; }
+  }
+}

package/dist/styles/media.css

@@ -0,0 +1,8 @@
+/* Media feature styles: images and the audio/video/file blocks (AudioView, VideoView, FileView). Import after `tailwindcss` and the UI kit's stylesheet (`vue/kit/nuxt-ui.css`, `vue/kit/primevue.css`). */
+@layer components {
+  .tiptap img { max-width: 100%; height: auto; border-radius: var(--sk-radius); margin: 0.75em 0; display: block; }
+  .tiptap img.ProseMirror-selectednode { outline: 2px solid var(--sk-primary); outline-offset: 2px; }
+  /* Audio/video/file blocks: player or card plus title field. */
+  .tiptap .media-block { margin: 0.75em 0; }
+  .tiptap .media-block.is-selected { outline: 2px solid var(--sk-primary); outline-offset: 2px; border-radius: var(--sk-radius); }
+}

package/dist/styles/mentions.css

@@ -0,0 +1,24 @@
+/* Mentions feature styles: the `@username` and `#tag` chips. Import after `tailwindcss` and the UI kit's stylesheet (`vue/kit/nuxt-ui.css`, `vue/kit/primevue.css`). */
+@layer components {
+  /* @username mention chip, tinted with the mentioned user's colour (inline `--mention-color`). */
+  .tiptap .mention {
+    color: var(--mention-color, var(--sk-primary));
+    background: color-mix(in oklab, var(--mention-color, var(--sk-primary)) 15%, transparent);
+    border-radius: 0.25rem;
+    padding: 0 0.2em;
+    font-weight: 500;
+    white-space: nowrap;
+    box-decoration-break: clone;
+  }
+  /* #tag chip: neutral pill, so tags stay distinguishable from coloured mentions. */
+  .tiptap .tag {
+    color: var(--sk-muted);
+    background: var(--sk-bg-elevated);
+    border: 1px solid var(--sk-border);
+    border-radius: 9999px;
+    padding: 0 0.45em;
+    font-size: 0.9em;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+}

package/dist/styles/tables.css

@@ -0,0 +1,25 @@
+/* Tables feature styles: GFM pipe tables and task lists. Import after `tailwindcss` and `@nuxt/ui`; reads the shared `--sk-*` tokens. */
+@layer components {
+  .tiptap table { border-collapse: collapse; margin: 0.75em 0; width: 100%; table-layout: fixed; overflow: hidden; }
+  .tiptap th, .tiptap td {
+    border: 1px solid var(--sk-border, #e4e4e7);
+    padding: 0.35em 0.6em;
+    vertical-align: top;
+    position: relative;
+    min-width: 3em;
+  }
+  .tiptap th { font-weight: 600; text-align: left; background: color-mix(in oklab, var(--sk-muted, #71717a) 10%, transparent); }
+  .tiptap th > p, .tiptap td > p { margin: 0.2em 0; }
+  .tiptap .selectedCell::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: color-mix(in oklab, var(--sk-primary, #2563eb) 15%, transparent);
+    pointer-events: none;
+  }
+  .tiptap ul[data-type="taskList"] { list-style: none; padding-left: 0.25rem; }
+  .tiptap ul[data-type="taskList"] > li { display: flex; align-items: flex-start; gap: 0.5em; }
+  .tiptap ul[data-type="taskList"] > li > label { flex: none; margin-top: 0.3em; user-select: none; }
+  .tiptap ul[data-type="taskList"] > li > div { flex: 1; min-width: 0; }
+  .tiptap ul[data-type="taskList"] > li[data-checked="true"] > div { color: var(--sk-muted, #71717a); text-decoration: line-through; }
+}