konpeki 0.2.0 → 0.3.0

package/src/styles/chrome.css

@@ -1,5 +1,3 @@
-.document-island,
-.action-island,
 .component-dock {
   position: fixed;
   z-index: 40;
@@ -11,18 +9,25 @@
 }
 
 .document-island {
-  top: 20px;
-  left: 20px;
-  width: 252px;
-  height: 60px;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  flex: none;
+  width: 100%;
+  height: var(--panel-header-height);
   gap: 10px;
   padding: 8px 10px;
-  border-radius: 14px;
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.left-collapsed .document-island {
+  border-bottom-color: transparent;
 }
 
-.workspace:has(.left-panel:not(.collapsed)) .document-island {
-  border-radius: 12px 12px 0 0;
-  box-shadow: none;
+.left-collapsed .document-title,
+.left-collapsed .document-title-error {
+  visibility: hidden;
 }
 
 .document-island img {
@@ -32,10 +37,6 @@
   object-fit: contain;
 }
 
-.document-island .panel-collapse-icon {
-  transform: rotate(-90deg);
-}
-
 .document-title {
   min-width: 0;
   flex: 1;
@@ -105,20 +106,15 @@
 }
 
 .action-island {
-  bottom: 92px;
-  left: 20px;
-  width: 252px;
-  min-width: 252px;
-  height: 56px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: none;
+  width: calc(var(--panel-width) - 2px);
+  height: 54px;
   gap: 4px;
   padding: 7px;
   border-top: 1px solid var(--ui-border);
-  border-radius: 0 0 12px 12px;
-  box-shadow: none;
-}
-
-.left-collapsed .action-island {
-  visibility: hidden;
 }
 
 .action-island button {
@@ -146,6 +142,82 @@
   justify-content: center;
 }
 
+.browser-menu {
+  position: relative;
+  min-width: 0;
+}
+
+.browser-menu > summary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding: 0 12px;
+  border-radius: 7px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  list-style: none;
+}
+
+.browser-menu > summary::-webkit-details-marker {
+  display: none;
+}
+
+.browser-menu > summary:hover,
+.browser-menu[open] > summary {
+  background: var(--ui-hover);
+}
+
+.browser-menu-popover {
+  position: absolute;
+  bottom: calc(100% + 14px);
+  left: -95px;
+  display: grid;
+  width: 304px;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--ui-border);
+  border-radius: 12px;
+  background: var(--ui-surface);
+  box-shadow: var(--ui-shadow);
+}
+
+.browser-menu-popover strong {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.browser-menu-popover p {
+  color: var(--ui-muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.browser-menu-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+
+.action-island .browser-menu-actions button {
+  justify-content: flex-start;
+  min-width: 0;
+  border-color: var(--ui-border);
+  background: var(--ui-surface);
+  font-size: 12px;
+}
+
+.browser-agent-handoff {
+  padding-top: 10px;
+  border-top: 1px solid var(--ui-border);
+}
+
+.browser-agent-handoff a {
+  color: var(--accent);
+  font-weight: 500;
+}
+
 .action-island button.primary {
   background: white;
   color: var(--ui-text);

package/src/styles/feedback.css

@@ -71,14 +71,31 @@
   }
 }
 .recovery {
+  position: fixed;
+  bottom: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 50;
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 20px;
-  background: #fff;
-  border-bottom: 1px solid #ccc;
+  gap: 12px;
+  width: max-content;
+  max-width: min(520px, max(240px, calc(100vw - 744px)), calc(100vw - 40px));
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: 12px;
+  box-shadow: var(--ui-shadow);
   padding: 12px;
   font-size: 13px;
+  line-height: 1.5;
+}
+.recovery > span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.recovery > button {
+  flex: none;
 }
 @media (prefers-reduced-motion: reduce) {
   *,

package/src/styles/right-panel.css

@@ -10,6 +10,10 @@
   margin-bottom: 16px;
 }
 
+.inspector-content:has(> .page-number-picker) legend {
+  margin-bottom: 7px;
+}
+
 .field-error {
   color: #a02020 !important;
 }
@@ -202,14 +206,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;
@@ -356,6 +352,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 +800,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 +888,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 +1104,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 +1146,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

@@ -11,67 +11,85 @@
   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: 20px;
+  height: calc(100dvh - 112px);
+  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-radius: 12px;
   box-shadow: var(--ui-shadow);
+  transition: width var(--panel-duration) var(--panel-easing),
+    height 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;
+}
+.left-sidebar.collapsed {
+  width: 107px;
+  height: calc(var(--panel-header-height) + 2px);
+}
+.left-sidebar:not(.collapsed):has(.browser-menu[open]) {
+  overflow: visible;
 }
 .right-panel {
-  top: 20px;
+  --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;
   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;
+  gap: 0;
+  padding: 0 4px;
+  border-bottom-color: transparent;
 }
-.right-panel.collapsed .panel-tabs,
-.right-panel.collapsed .right-panel-body {
-  display: none;
+.right-panel.collapsed .panel-tabs {
+  visibility: hidden;
 }
+.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;
 }
-.left-panel.collapsed {
+.left-panel,
+.action-island,
+.right-panel-body {
+  transition: opacity var(--panel-duration) var(--panel-easing),
+    visibility 0s;
+}
+.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 +109,13 @@
 }
 .right-panel > .panel-toolbar {
   flex: none;
-  height: 55px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 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);
 }
 .panel-heading {
   flex: 1;
@@ -197,6 +220,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;
@@ -299,3 +324,9 @@
     padding: 96px 16px 110px;
   }
 }
+
+@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.