konpeki 0.2.0 → 0.3.1

package/src/styles/right-panel.css

@@ -10,8 +10,73 @@
   margin-bottom: 16px;
 }
 
-.field-error {
-  color: #a02020 !important;
+.inspector-content:has(> .page-number-picker) legend {
+  margin-bottom: 7px;
+}
+
+.overflow-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 48px;
+  height: 40px;
+  padding: 0;
+  color: #8a5409;
+  border: 0;
+  background: #fff5dd;
+  font-size: 12px;
+}
+.overflow-trigger:disabled {
+  visibility: hidden;
+}
+.overflow-trigger svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.overflow-popover {
+  position: fixed;
+  inset: calc(var(--panel-top) + var(--panel-header-height) + 6px) 20px auto auto;
+  margin: 0;
+  width: min(328px, calc(100vw - 40px));
+  max-height: calc(100dvh - var(--panel-top) - 100px);
+  overflow: auto;
+  padding: 16px;
+  border: 1px solid var(--ui-border);
+  border-radius: 10px;
+  background: var(--ui-surface);
+  color: var(--ui-text);
+  box-shadow: 0 8px 32px #0000001a;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.overflow-popover p {
+  margin: 8px 0 12px;
+  color: var(--ui-muted);
+  font-size: 12px;
+}
+.overflow-popover ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.overflow-popover button {
+  display: grid;
+  gap: 4px;
+  width: 100%;
+  padding: 10px;
+  text-align: left;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  font-size: 12px;
+}
+.overflow-popover li + li {
+  margin-top: 8px;
 }
 
 .custom-visual-summary p {
@@ -138,7 +203,7 @@
   gap: 3px;
   padding: 3px;
   background: #f4f4f5;
-  border-radius: 7px;
+  border-radius: 8px;
 }
 
 .segmented-options button {
@@ -202,14 +267,6 @@
   white-space: nowrap;
 }
 
-.theme-options button[data-theme="precision"] > span:first-child {
-  font-family: "Noto Sans", sans-serif;
-}
-
-.theme-options button[data-theme="editorial"] > span:first-child {
-  font-family: Georgia, serif;
-}
-
 .theme-swatches {
   display: flex;
   gap: 3px;
@@ -249,9 +306,11 @@
 .layer-list {
   display: grid;
   gap: 4px;
+  padding-block: 3px;
 }
 
 .layer-row {
+  position: relative;
   display: grid;
   grid-template-columns: 16px minmax(0, 1fr) auto;
   align-items: center;
@@ -270,6 +329,26 @@
   opacity: 0.45;
 }
 
+.layer-row[data-drop-edge]::after {
+  position: absolute;
+  z-index: 1;
+  left: -1px;
+  right: -1px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--accent);
+  pointer-events: none;
+  content: "";
+}
+
+.layer-row[data-drop-edge="before"]::after {
+  top: -4px;
+}
+
+.layer-row[data-drop-edge="after"]::after {
+  bottom: -4px;
+}
+
 .layer-drag {
   color: var(--ui-muted);
   font-size: 13px;
@@ -356,6 +435,11 @@
   color: #565656;
 }
 
+.field:has(> select[name="Font"]) > span {
+  color: var(--ui-text);
+  font-weight: 500;
+}
+
 .field textarea {
   resize: none;
   overflow-y: auto;
@@ -799,6 +883,13 @@
   display: block;
 }
 
+.appearance-preview[data-property="template"] svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .appearance-preview[data-property="template"] i {
   position: absolute;
   z-index: 1;
@@ -880,24 +971,6 @@
 .appearance-preview[data-property="template"][data-value="treemap"] i:nth-child(3) { right: 8px; bottom: 3px; width: 5px; height: 7px; }
 .appearance-preview[data-property="template"][data-value="treemap"] i:nth-child(4) { right: 3px; bottom: 3px; width: 3px; height: 7px; background: var(--preview-secondary); }
 
-.appearance-preview[data-property="template"][data-value="scatter"] i:nth-child(1) { left: 5px; bottom: 5px; }
-.appearance-preview[data-property="template"][data-value="scatter"] i:nth-child(2) { left: 13px; bottom: 9px; }
-.appearance-preview[data-property="template"][data-value="scatter"] i:nth-child(3) { left: 22px; bottom: 12px; }
-.appearance-preview[data-property="template"][data-value="scatter"] i:nth-child(4) { right: 5px; top: 4px; width: 7px; height: 7px; background: var(--preview-accent); }
-
-.appearance-preview[data-property="template"][data-value="sankey"]::before,
-.appearance-preview[data-property="template"][data-value="sankey"]::after {
-  position: absolute;
-  left: 4px;
-  width: 29px;
-  border-top: 5px solid var(--preview-accent);
-  border-radius: 50%;
-  content: "";
-}
-.appearance-preview[data-property="template"][data-value="sankey"]::before { top: 7px; transform: rotate(8deg); }
-.appearance-preview[data-property="template"][data-value="sankey"]::after { bottom: 6px; border-color: var(--preview-muted); transform: rotate(-9deg); }
-.appearance-preview[data-property="template"][data-value="sankey"] i { display: none; }
-
 .appearance-preview[data-property="template"][data-value="linear"]::before,
 .appearance-preview[data-property="template"][data-value="request-flow"]::before {
   position: absolute;
@@ -1114,10 +1187,14 @@ legend {
   place-items: center;
 }
 
-.diagram-type-category button:hover {
+.diagram-type-category button:hover:not(:disabled) {
   background: var(--ui-hover);
 }
 
+.diagram-type-category button:disabled {
+  opacity: 0.48;
+}
+
 .diagram-type-category button.selected {
   border-color: color-mix(in srgb, var(--accent) 45%, white);
   background: var(--ui-selected);
@@ -1152,6 +1229,13 @@ legend {
   stroke: none;
 }
 
+.chart-type-options .appearance-preview {
+  margin: 4px 0;
+  border: 0;
+  background: transparent;
+  transform: scale(1.333333);
+}
+
 .visualization-description {
   display: block;
   margin-top: 8px;

package/src/styles/shell.css

@@ -1,3 +1,6 @@
+:root {
+  --panel-top: 20px;
+}
 .skip-link {
   position: fixed;
   top: -60px;
@@ -11,67 +14,102 @@
   top: 8px;
 }
 .workspace {
+  --panel-duration: 200ms;
+  --panel-easing: cubic-bezier(0.2, 0, 0, 1);
+  --panel-header-height: 58px;
   position: relative;
   height: 100dvh;
   min-height: 100dvh;
   overflow: hidden;
   background: var(--ui-bg);
 }
-.left-panel,
+.left-sidebar,
 .right-panel {
   position: fixed;
-  top: 92px;
-  bottom: 92px;
+  top: var(--panel-top);
+  height: calc(100dvh - 92px - var(--panel-top));
+  width: var(--panel-width);
   z-index: 30;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   background: var(--ui-surface);
   min-height: 0;
-  border: 1px solid var(--ui-border);
+  border: 1px solid transparent;
   border-radius: 12px;
-  box-shadow: var(--ui-shadow);
+  box-shadow: var(--ui-floating-shadow);
+  transition: width var(--panel-duration) var(--panel-easing),
+    height var(--panel-duration) var(--panel-easing),
+    top var(--panel-duration) var(--panel-easing);
 }
-.left-panel {
-  top: 80px;
-  bottom: 148px;
+.left-sidebar {
+  --panel-width: 252px;
   left: 20px;
-  width: 252px;
-  border-top: 0;
-  border-bottom: 0;
-  border-radius: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+  z-index: 40;
 }
-.right-panel {
+.left-sidebar.collapsed {
   top: 20px;
+  width: 107px;
+  height: calc(var(--panel-header-height) + 2px);
+}
+.left-sidebar:not(.collapsed):has(.browser-menu[open]) {
+  overflow: visible;
+}
+.right-panel {
+  --panel-width: min(328px, calc(100vw - 40px));
   right: 20px;
-  display: flex;
-  flex-direction: column;
-  width: min(328px, calc(100vw - 40px));
-  overflow: hidden;
 }
 .right-panel.collapsed {
-  bottom: auto;
+  top: 20px;
   width: 50px;
-  height: 56px;
+  height: calc(var(--panel-header-height) + 2px);
 }
 .right-panel.collapsed > .panel-toolbar {
-  height: 54px;
-  justify-content: flex-end;
-  padding: 0 8px;
-  border-bottom: 0;
-}
-.right-panel.collapsed .panel-tabs,
-.right-panel.collapsed .right-panel-body {
-  display: none;
+  gap: 0;
+  grid-template-columns: minmax(0, 1fr) 0 40px;
+  padding: 0 4px;
+  border-bottom-color: transparent;
 }
+.left-panel,
 .right-panel-body {
+  width: calc(var(--panel-width) - 2px);
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0;
+  overflow: hidden;
+}
+.right-panel-body {
+  align-self: flex-end;
+}
+.right-panel > .panel-toolbar > .panel-tabs {
+  clip-path: inset(-4px 0);
+}
+.right-panel .panel-tabs button:focus-visible {
+  outline-offset: -3px;
+}
+.document-title,
+.document-title-error,
+.file-status,
+.right-panel > .panel-toolbar > .panel-tabs,
+.right-panel > .panel-toolbar > .overflow-control,
+.left-panel,
+.action-island,
+.right-panel-body {
+  transition: opacity var(--panel-duration) var(--panel-easing),
+    visibility 0s;
 }
-.left-panel.collapsed {
+.left-collapsed .document-title,
+.left-collapsed .document-title-error,
+.left-collapsed .file-status,
+.right-panel.collapsed .panel-tabs,
+.right-panel.collapsed .overflow-control,
+.left-panel.collapsed,
+.left-collapsed .action-island,
+.right-panel.collapsed .right-panel-body {
+  opacity: 0;
   visibility: hidden;
+  transition-delay: 0s, var(--panel-duration);
 }
 .panel-toolbar {
   position: sticky;
@@ -91,8 +129,15 @@
 }
 .right-panel > .panel-toolbar {
   flex: none;
-  height: 55px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 48px 40px;
+  height: var(--panel-header-height);
   padding: 0 8px 0 12px;
+  overflow: hidden;
+  transition: padding var(--panel-duration) var(--panel-easing),
+    gap var(--panel-duration) var(--panel-easing),
+    grid-template-columns var(--panel-duration) var(--panel-easing),
+    border-bottom-color var(--panel-duration) var(--panel-easing);
 }
 .panel-heading {
   flex: 1;
@@ -197,6 +242,8 @@
   align-items: center;
   justify-content: center;
   min-width: 0;
+  transition: padding-left var(--panel-duration) var(--panel-easing),
+    padding-right var(--panel-duration) var(--panel-easing);
 }
 .workspace.left-collapsed .stage {
   padding-left: 96px;
@@ -264,7 +311,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  min-height: 26px;
+  height: 40px;
   margin: 0 0 12px;
 }
 .edit-elements-action {
@@ -274,10 +321,14 @@
   font-size: 12px;
 }
 .stage-meta h2 {
+  min-width: 0;
+  overflow: hidden;
   font-size: 12px;
   font-weight: 500;
   color: var(--ui-muted);
   margin: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   cursor: text;
 }
 .stage-meta input {
@@ -299,3 +350,15 @@
     padding: 96px 16px 110px;
   }
 }
+
+@media (max-width: 600px) {
+  :root {
+    --panel-top: 88px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .workspace {
+    --panel-duration: 0ms;
+  }
+}

package/.agents/skills/authoring-visuals/SKILL.md

@@ -1,93 +0,0 @@
----
-name: authoring-visuals
-description: Creates and revises editable Konpeki visuals from source material. Use for social graphics, article headers, visual explanations and presentations, including revisions to an existing composition.
----
-
-# Authoring visuals with Konpeki
-
-Deliver an editable composition and visually reviewed output. This skill needs
-the surrounding Konpeki runtime and resources; if they are unavailable, follow
-[SETUP.md](../../../SETUP.md) first. Paths here are relative to this file;
-run commands below from the user's workspace with Konpeki installed locally.
-For repository development, substitute `pnpm konpeki` for
-`npm exec --no -- konpeki`. Keep authored documents outside `node_modules`.
-
-## 1. Interpret the brief
-
-Read [project rules](../../../AGENTS.md) and
-[authoring policy](../../../AUTHORING.md). Use the user's existing prompt as the
-brief; do not ask them to repeat it in the canvas. Establish the source facts,
-audience, takeaway and destination. Ask only when missing facts or conflicting
-requirements prevent a faithful result.
-
-Use `default` authoring mode unless requested otherwise. Explicit visual
-preferences override taste defaults, not factual fidelity or readability. Use
-the policy's [comparison workflow](../../../AUTHORING.md#explore-an-uncertain-direction)
-only when requested or accepted. A single page is a complete creation; choose
-dimensions for its destination rather than assuming a slide deck.
-
-## 2. Author or revise the composition
-
-Read the [composition contract](../../../composition/README.md). For a new visual,
-create `slides/<name>/composition.json` unless the user supplies another path.
-Save the creative brief in `PROMPT.md` and substantial facts, citations and asset
-provenance in `SOURCE.md`. Separate assumptions from supplied facts. Preserve
-creative requests accurately, but omit private coordination and environment or
-agent metadata; label excerpts and redactions rather than calling them verbatim.
-
-For revisions, reread the current file first. Preserve unrelated content,
-component/vector IDs and human-edited geometry. Honor explicit chart or diagram
-choices. Recompose for a new aspect ratio instead of stretching or cropping.
-
-Prefer native text and semantic components. When standard drafts cannot express
-the visual, use editable vectors inside their owning component. Reuse
-[design resources](../../../design/README.md) and reference examples as needed.
-Trusted React may generate SVG for conversion, but imported JSX must not execute
-in the canvas or become a second document source.
-
-## 3. Validate, render and repair
-
-```sh
-npm exec --no -- konpeki validate slides/<name>/composition.json
-npm exec --no -- konpeki preview slides/<name>/composition.json
-```
-
-Reuse an active file-backed preview for the same document when available. Open
-the exact session URL, or its host-approved remote preview equivalent. Inspect
-every affected page and requested theme at presentation and smaller review sizes
-after fonts load. Check factual fidelity, text bounds, contrast, reading order
-and relationships. Repair consequential issues and inspect fresh renders.
-
-Follow [verification guidance](../../../docs/development.md#verification) for
-code changes. Validation alone is not visual review. If a required check cannot
-run, state the limitation; do not claim it passed. Honor requested checkpoints;
-otherwise continue to finished output.
-
-## 4. Deliver and continue revisions
-
-Return the composition path, usable preview, reviewed images or requested
-exports, source attribution and verification limitations. Verify exports
-separately; browser images do not prove editable PDF/PPTX or font fidelity.
-Include any generator source while keeping composition JSON authoritative.
-
-Keep revision requests in agent chat by default. When explicitly waiting for a
-canvas request, run `npm exec --no -- konpeki wait <composition.json>` alongside the preview.
-**Build it** submits a request; it does not launch an agent. On receiving it,
-reread the named file and compare its revision with the request. If it changed,
-reconcile against the latest document instead of applying a stale rewrite.
-Apply every attached note to its named page, component or vector-element ID;
-without notes, respect the selected scope. Preserve unrelated edits and stable
-IDs. A request is already marked working when `wait` returns; it is not deleted.
-Validate, render, inspect and repair the result, then run
-`npm exec --no -- konpeki finish <composition.json> <request-id> --message "Updated and checked"`.
-File changes alone do not resolve notes. If blocked, finish with
-`--status needs-clarification --message "..."` or `--status failed --message "..."`;
-unresolved notes remain for retry. Never mark a partially handled batch done.
-Use `konpeki request <composition.json>` to recover an interrupted request and
-verify it is still active before further writes. Cancellation does not stop your
-process: stop work if the request is no longer active. Do not edit the feedback
-sidecar directly. Return to `wait` only when the person requested a continuing loop.
-
-See [canvas workflow](../../../docs/workflow.md) for the full handoff contract.
-Never bypass revision checks or mutate hidden browser storage to replace the
-document. Do not publish without permission.