@lemonriver/core 0.1.0 → 0.2.0

package/src/app/styles.css

@@ -222,109 +222,93 @@
 }
 
 /*
- * Comment input cue — kept from the original design but retoned to match
- * the new palette (warm vermillion + amber instead of the AI-classic
- * blue/violet halo). Plays once on first open, then settles.
+ * Indeterminate "line loader" — a hairline track with a short bar that
+ * glides back and forth. Used for full-screen loading states in place of
+ * a spinner; quieter, more typographic, easier on the eye.
  */
-@property --comment-cue-angle {
-  syntax: "<angle>";
-  initial-value: 0deg;
-  inherits: false;
+/* Comment-mode hint pill: the shell materializes once, then every text
+   swap blurs the old copy out while the new one blurs in. */
+@keyframes island-enter {
+  from {
+    opacity: 0;
+    filter: blur(6px);
+    transform: translateY(6px) scale(0.9);
+  }
 }
 
-.comment-cue {
-  position: relative;
-  isolation: isolate;
+@keyframes island-arrive {
+  from {
+    opacity: 0;
+    filter: blur(6px);
+    transform: scale(0.94);
+  }
 }
 
-.comment-cue::before {
-  content: "";
-  position: absolute;
-  inset: -1px;
-  border-radius: calc(var(--radius-md) + 1px);
-  padding: 1.25px;
-  background: conic-gradient(
-    from var(--comment-cue-angle),
-    transparent 0deg,
-    transparent 250deg,
-    oklch(0.78 0.14 60 / 0.55) 295deg,
-    oklch(0.62 0.2 28 / 0.85) 325deg,
-    oklch(0.78 0.14 60 / 0.55) 350deg,
-    transparent 360deg
-  );
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
-  mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  pointer-events: none;
-  opacity: 0;
-  z-index: 1;
-  animation: comment-cue-trace 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms 1 both;
+@keyframes island-leave {
+  to {
+    opacity: 0;
+    filter: blur(6px);
+    transform: scale(0.94);
+  }
 }
 
-.comment-cue::after {
-  content: "";
-  position: absolute;
-  inset: -10px;
-  border-radius: calc(var(--radius-md) + 10px);
-  background:
-    radial-gradient(80% 60% at 30% 50%, oklch(0.62 0.2 28 / 0.18), transparent 70%),
-    radial-gradient(70% 60% at 75% 60%, oklch(0.78 0.14 60 / 0.16), transparent 70%);
-  filter: blur(14px);
-  opacity: 0;
-  z-index: -1;
+.island-enter {
+  animation: island-enter 420ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+
+.island-arrive {
+  animation: island-arrive 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+
+.island-leave {
   pointer-events: none;
-  animation: comment-cue-halo 1700ms ease-out 180ms 1 both;
+  animation: island-leave 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
 }
 
-@keyframes comment-cue-trace {
-  0% {
-    --comment-cue-angle: 0deg;
-    opacity: 0;
-  }
-  18% {
-    opacity: 1;
-  }
-  82% {
-    opacity: 1;
-  }
-  100% {
-    --comment-cue-angle: 360deg;
+/* Counter digits roll in the direction of the change (--roll: 1 up, -1 down). */
+@keyframes roll-arrive {
+  from {
     opacity: 0;
+    transform: translateY(calc(var(--roll, 1) * 100%));
   }
 }
 
-@keyframes comment-cue-halo {
-  0% {
-    opacity: 0;
-    transform: scale(0.97);
-  }
-  40% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
+@keyframes roll-leave {
+  to {
     opacity: 0;
-    transform: scale(1.015);
+    transform: translateY(calc(var(--roll, 1) * -100%));
   }
 }
 
+.roll-arrive {
+  animation: roll-arrive 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+
+.roll-leave {
+  pointer-events: none;
+  animation: roll-leave 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .comment-cue::before,
-  .comment-cue::after {
+  .island-enter,
+  .island-arrive {
+    animation: island-arrive 160ms ease-out both;
+    filter: none;
+    transform: none;
+  }
+
+  .island-leave,
+  .roll-leave {
     animation: none;
+    opacity: 0;
+  }
+
+  .roll-arrive {
+    animation: island-arrive 160ms ease-out both;
+    transform: none;
   }
 }
 
-/*
- * Indeterminate "line loader" — a hairline track with a short bar that
- * glides back and forth. Used for full-screen loading states in place of
- * a spinner; quieter, more typographic, easier on the eye.
- */
 @keyframes osd-line-loader {
   0% {
     transform: translateX(0%);
@@ -399,3 +383,173 @@
     background-clip: content-box;
   }
 }
+
+/* Agent presence: ring, write sweep and shimmer shown while an agent edits a deck. */
+@property --agent-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+[data-agent-provider] {
+  --agent-a: oklch(0.68 0.14 42);
+  --agent-b: oklch(0.82 0.12 75);
+}
+
+[data-agent-provider="codex"] {
+  --agent-a: oklch(0.64 0.13 170);
+  --agent-b: oklch(0.7 0.14 240);
+}
+
+@keyframes agent-spin {
+  to {
+    --agent-angle: 360deg;
+  }
+}
+
+@keyframes agent-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+.agent-ring {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1.5px;
+  background: conic-gradient(
+    from var(--agent-angle),
+    transparent 0deg,
+    var(--agent-a) 70deg,
+    var(--agent-b) 140deg,
+    transparent 210deg,
+    transparent 360deg
+  );
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+  animation:
+    agent-spin 3.6s linear infinite,
+    agent-fade-in 400ms var(--ease-swift) both;
+}
+
+.agent-glow {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow:
+    inset 0 0 0 1px color-mix(in oklch, var(--agent-a) 35%, transparent),
+    inset 0 0 48px -12px color-mix(in oklch, var(--agent-a) 45%, transparent);
+  animation: agent-fade-in 400ms var(--ease-swift) both;
+}
+
+@keyframes agent-sweep {
+  from {
+    background-position: 120% 0;
+    opacity: 1;
+  }
+  to {
+    background-position: -20% 0;
+    opacity: 0;
+  }
+}
+
+.agent-sweep {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    105deg,
+    transparent 35%,
+    color-mix(in oklch, var(--agent-b) 22%, transparent) 50%,
+    transparent 65%
+  );
+  background-size: 250% 100%;
+  animation: agent-sweep 900ms var(--ease-swift) both;
+}
+
+@keyframes agent-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0% 0;
+  }
+}
+
+.agent-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--muted-foreground) 35%,
+    var(--foreground) 50%,
+    var(--muted-foreground) 65%
+  );
+  background-size: 300% 100%;
+  background-clip: text;
+  color: transparent;
+  animation: agent-shimmer 1.8s linear infinite;
+}
+
+@keyframes agent-progress {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+
+.agent-progress {
+  pointer-events: none;
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  height: 1.5px;
+  overflow: hidden;
+}
+
+.agent-progress::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  width: 40%;
+  background: linear-gradient(90deg, transparent, var(--agent-a), var(--agent-b), transparent);
+  animation: agent-progress 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-ring {
+    animation: agent-fade-in 160ms ease-out both;
+    --agent-angle: 120deg;
+  }
+
+  .agent-sweep {
+    display: none;
+  }
+
+  .agent-shimmer {
+    animation: none;
+    color: var(--foreground);
+    background: none;
+  }
+
+  .agent-progress::after {
+    animation: none;
+    width: 100%;
+    opacity: 0.6;
+  }
+}
+
+.sidebar-swap {
+  animation: agent-fade-in 160ms var(--ease-swift, ease-out);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-swap {
+    animation: none;
+  }
+}

package/src/editing/placeholder-id.ts

@@ -0,0 +1 @@
+export const UNTITLED_SLIDE_ID_RE = /^untitled(-\d+)?$/;

package/src/locale/en.ts

@@ -96,6 +96,7 @@ export const en: Locale = {
   },
 
   slide: {
+    resizeSidePanel: 'Resize side panel',
     home: 'Home',
     backToHome: 'Back to home',
     agentConnected: 'Agent connected',
@@ -287,10 +288,9 @@ export const en: Locale = {
     cropFitCover: 'Fill',
     cropFitContain: 'Fit',
     cropApply: 'Apply',
-    leaveComment: 'Comment',
+    commentMode: 'Comment',
     commentPlaceholder: 'Describe a change for the agent…',
-    commentShortcutHint: '⌘/ to focus · ⌘↵ to add',
-    addComment: 'Add comment',
+    commentPost: 'Post',
     unsavedChanges: {
       one: '{count} unsaved change',
       other: '{count} unsaved changes',
@@ -300,10 +300,14 @@ export const en: Locale = {
       other: '{count} comments',
     },
     commentLineLabel: 'line {n}',
-    commentsEmpty: 'No comments yet. Select an object and open Comment in the Format panel.',
+    commentRegionLabel: 'region',
+    commentEmptyHint: 'Click an element or drag across a region to leave a comment.',
     commentsApplyHintPrefix: 'Run ',
     commentsApplyHintSuffix: ' in your agent to apply these.',
     commentDeleteAria: 'Delete',
+    commentUpdateFailed: "Couldn't update comment:",
+    commentAddFailed: "Couldn't add comment:",
+    commentRegionNoTarget: "Couldn't find an element to attach this region to.",
     saveFailed: "Couldn't save:",
     decreaseFontSize: 'Decrease font size',
     increaseFontSize: 'Increase font size',
@@ -454,7 +458,7 @@ export const en: Locale = {
     title: 'Story board',
     openBoard: 'Story board (B)',
     backToDeck: 'Back to deck',
-    hint: 'Drag a card to reorder · Double-click to edit the page',
+    hint: 'Drag a card to reorder · Double-click to edit the page · Drag the dot to link two cards',
     loading: 'Loading deck…',
     columnFallback: 'Part {n}',
     moveToEnd: 'Move to end',
@@ -470,6 +474,19 @@ export const en: Locale = {
     /** template: "Added a blank page at {n}" */
     toastInserted: 'Added a blank page at {n}',
     insertFailed: 'Could not add a page',
+    cardTitlePlaceholder: 'Name this card',
+    renameCard: 'Rename this card',
+    status: 'Status',
+    statusNone: 'No status',
+    statusTodo: 'To do',
+    statusDoing: 'In progress',
+    statusReview: 'In review',
+    statusDone: 'Done',
+    memoPlaceholder: 'Work memo — stays on the board…',
+    linkHandle: 'Drag onto another card to link them',
+    showLinks: 'Show links',
+    hideLinks: 'Hide links',
+    removeLink: 'Remove this link',
   },
 
   pdfToast: {
@@ -559,4 +576,109 @@ export const en: Locale = {
     expandPromptAria: 'Expand prompt',
     collapsePromptAria: 'Collapse prompt',
   },
+
+  agent: {
+    title: 'Agent',
+    beta: 'Beta',
+    betaTitle: 'Early preview',
+    betaHint: 'Replies, edits and tool calls can occasionally fail or do something unexpected.',
+    open: 'Agent',
+    openTitle: 'Open the agent panel',
+    close: 'Close agent panel',
+    newSession: 'New chat',
+    sessions: 'History',
+    noSessions: 'No conversations yet.',
+    deleteSession: 'Delete conversation',
+    historyThisDeck: 'This deck',
+    historyOtherDecks: 'Other decks',
+    historyEmptyHint: 'Chats you start in this panel show up here.',
+    sessionRunning: 'Working',
+    composerPlaceholder: 'Ask {provider} to create or edit slides…',
+    send: 'Send',
+    stop: 'Stop',
+    working: 'Working',
+    contextPage: 'Page {n}',
+    contextSelection: 'Selection',
+    pendingComments: { one: '{count} comment', other: '{count} comments' },
+    applyComments: 'Apply comments',
+    applyCommentsWith: 'Apply with {provider}',
+    createDeck: 'New deck',
+    createDeckWith: 'Create a deck with {provider}',
+    quickCreate: 'Draft a new deck',
+    quickCreateHint: 'Opens a blank deck; describe it and the agent drafts it page by page.',
+    quickApply: 'Apply pending comments',
+    quickApplyHint: 'Resolves every @slide-comment marker in this slide.',
+    quickTheme: 'Create a theme',
+    quickThemeHint: 'Extracts or designs a reusable theme under themes/.',
+    quickEdit: 'Edit this page',
+    quickEditHint: 'Describe a change to the page you are viewing.',
+    emptyTitle: 'What should we build?',
+    emptyHint: 'Describe a deck, or pick a starting point.',
+    questionSubmit: 'Continue',
+    questionOther: 'Other',
+    questionOtherPlaceholder: 'Type your own answer',
+    questionCancelled: 'Dismissed',
+    permissionTitle: 'Needs approval',
+    allow: 'Allow',
+    deny: 'Deny',
+    allowed: 'Allowed',
+    denied: 'Denied',
+    autoApprove: 'Auto-approve',
+    autoApproveHint: 'Run commands without asking. Edits inside the workspace are always allowed.',
+    resultDone: 'Done',
+    resultStopped: 'Stopped',
+    resultSeconds: '{seconds}s',
+    errorEyebrow: 'Error',
+    statusLoading: 'Checking agents',
+    disabled: 'The agent panel is disabled in lemonriver.config.ts.',
+    connectTitle: 'Connect an agent',
+    connectDescription:
+      'Drive your coding agent from here instead of a terminal. Agents installed on this machine connect automatically and reuse their sign-in.',
+    connect: 'Connect',
+    connecting: 'Connecting',
+    connected: 'Connected',
+    connectInstallHint: 'Adds {pkg} to this workspace with {pm}.',
+    cliFound: 'CLI found · v{version}',
+    cliFoundNoVersion: 'CLI found',
+    cliMissing: 'CLI not found on PATH',
+    cliHint: 'Install the {name} CLI and sign in once; the panel reuses its login.',
+    needCliTitle: 'Install Claude Code or Codex first',
+    needCliDescription:
+      'The panel drives the coding agent CLI on this machine, and none was found on your PATH. Install one, sign in once in a terminal, then check again.',
+    checkAgain: 'Check again',
+    retry: 'Retry',
+    toastConnected: '{name} connected',
+    toastConnectFailed: 'Could not install {pkg}',
+    manageConnections: 'Manage agents',
+    backToChat: 'Back',
+    toastSendFailed: 'Could not send message',
+    newDeckTitle: "What's this deck about?",
+    newDeckHint:
+      'Describe the topic, audience and tone. {provider} drafts it page by page while you watch.',
+    newDeckPlaceholder: 'A 10-minute talk on…',
+    toastCreateDeckFailed: 'Could not create a deck',
+    steps: { one: '{count} step', other: '{count} steps' },
+    questionSkip: 'Skip',
+    copyMessage: 'Copy',
+    copied: 'Copied',
+    editMessage: 'Edit',
+    cancelEdit: 'Cancel',
+    sendEdit: 'Send',
+    editHint:
+      'Sending replaces the conversation after this message. Edits already made to files stay.',
+    modelDefault: 'Default',
+    reasoning: 'Reasoning',
+    effortAuto: 'Auto',
+    efforts: {
+      minimal: 'Minimal',
+      low: 'Low',
+      medium: 'Medium',
+      high: 'High',
+      xhigh: 'Extra high',
+      max: 'Max',
+    },
+    presenceEditing: '{provider} is editing',
+    presenceThinking: 'Thinking',
+    presenceWaiting: 'Waiting for you',
+  },
 };