@forgedevstack/ink 1.0.1 → 1.1.0

package/dist/styles.css

@@ -1,17 +1,28 @@
 .Ink-Editor {
   --ink-border: #e5e7eb;
   --ink-bg: #ffffff;
-  --ink-toolbar: #f9fafb;
-  --ink-text: #111827;
-  --ink-muted: #6b7280;
-  --ink-accent: #0f766e;
+  --ink-toolbar: #f8fafc;
+  --ink-text: #0f172a;
+  --ink-muted: #64748b;
+  --ink-accent: #0d9488;
   --ink-accent-soft: #ccfbf1;
+  --ink-shadow: 0 10px 40px rgb(15 23 42 / 0.08);
+  --ink-radius: 1rem;
+  --ink-ai-accent: var(--ink-accent);
+  --ink-ai-surface: #f8fafc;
+  --ink-ai-border: var(--ink-border);
   border: 1px solid var(--ink-border);
-  border-radius: 0.75rem;
+  border-radius: var(--ink-radius);
   overflow: hidden;
   background: var(--ink-bg);
   color: var(--ink-text);
-  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+  box-shadow: var(--ink-shadow);
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+}
+
+.Ink-Editor[data-variant='document'] {
+  --ink-toolbar: #ffffff;
+  box-shadow: 0 4px 24px rgb(15 23 42 / 0.06);
 }
 
 .Ink-Editor[data-disabled='true'] {
@@ -23,8 +34,8 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.25rem;
-  padding: 0.5rem;
+  gap: 0.2rem;
+  padding: 0.55rem 0.65rem;
   border-bottom: 1px solid var(--ink-border);
   background: var(--ink-toolbar);
 }
@@ -34,7 +45,7 @@
   border: 0;
   background: transparent;
   color: inherit;
-  border-radius: 0.375rem;
+  border-radius: 0.45rem;
   cursor: pointer;
 }
 
@@ -42,12 +53,13 @@
   min-width: 2rem;
   height: 2rem;
   padding: 0 0.4rem;
-  font-weight: 700;
+  font-weight: 650;
+  font-size: 0.85rem;
 }
 
 .Ink-Editor__button:hover,
 .Ink-Editor__select:hover {
-  background: rgb(0 0 0 / 0.06);
+  background: rgb(15 23 42 / 0.05);
 }
 
 .Ink-Editor__button--active {
@@ -58,12 +70,19 @@
 .Ink-Editor__select {
   height: 2rem;
   padding: 0 0.5rem;
+  border: 1px solid transparent;
+}
+
+.Ink-Editor__select:focus {
+  outline: none;
+  border-color: var(--ink-accent);
+  background: #fff;
 }
 
 .Ink-Editor__divider {
   width: 1px;
   height: 1.25rem;
-  margin: 0 0.25rem;
+  margin: 0 0.3rem;
   background: var(--ink-border);
 }
 
@@ -91,12 +110,31 @@
   border: 1px solid var(--ink-border);
 }
 
+.Ink-Editor__shell {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.Ink-Editor__body {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 .Ink-Editor__content {
   min-height: 150px;
-  padding: 1rem;
+  padding: 1.1rem 1.25rem 1.1rem 2.5rem;
   outline: none;
   overflow: auto;
-  line-height: 1.6;
+  line-height: 1.65;
+}
+
+.Ink-Editor[data-variant='document'] .Ink-Editor__content {
+  padding: 2rem 2.5rem 2rem 3rem;
+  max-width: 48rem;
+  margin: 0 auto;
 }
 
 .Ink-Editor__content:empty::before {
@@ -108,6 +146,7 @@
 .Ink-Editor__content img {
   max-width: 100%;
   height: auto;
+  border-radius: 0.35rem;
 }
 
 .Ink-Editor__content h1,
@@ -116,7 +155,7 @@
 .Ink-Editor__content h4,
 .Ink-Editor__content h5,
 .Ink-Editor__content h6 {
-  margin: 0.75rem 0 0.5rem;
+  margin: 0.85rem 0 0.45rem;
   line-height: 1.25;
 }
 
@@ -125,7 +164,50 @@
 .Ink-Editor__content ol,
 .Ink-Editor__content blockquote,
 .Ink-Editor__content pre {
-  margin: 0.5rem 0;
+  margin: 0.55rem 0;
+}
+
+.Ink-Editor__content .Ink-block--active {
+  outline: 1px solid rgb(13 148 136 / 0.35);
+  border-radius: 0.35rem;
+  background: rgb(13 148 136 / 0.03);
+}
+
+.Ink-Editor__content .Ink-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.75rem 0;
+  font-size: 0.95rem;
+}
+
+.Ink-Editor__content .Ink-table th,
+.Ink-Editor__content .Ink-table td {
+  border: 1px solid var(--ink-border);
+  padding: 0.45rem 0.6rem;
+  min-width: 4rem;
+}
+
+.Ink-Editor__content .Ink-table th {
+  background: #f1f5f9;
+  font-weight: 650;
+  text-align: left;
+}
+
+.Ink-Editor__content .Ink-tc-insert {
+  background: rgb(34 197 94 / 0.18);
+  text-decoration: none;
+  color: inherit;
+}
+
+.Ink-Editor__content .Ink-tc-delete {
+  background: rgb(239 68 68 / 0.14);
+  color: #991b1b;
+}
+
+.Ink-Editor__content .Ink-comment-mark {
+  background: #fde047;
+  border-radius: 0.15rem;
+  padding: 0 0.1rem;
 }
 
 .Ink-Editor__footer {
@@ -136,6 +218,368 @@
   text-align: right;
 }
 
+.Ink-BlockHandles {
+  position: absolute;
+  left: 0.25rem;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.Ink-BlockHandles__grip,
+.Ink-BlockHandles__btn {
+  width: 1.5rem;
+  height: 1.35rem;
+  border: 0;
+  border-radius: 0.3rem;
+  background: #fff;
+  box-shadow: 0 1px 3px rgb(15 23 42 / 0.12);
+  color: var(--ink-muted);
+  cursor: pointer;
+  font-size: 0.7rem;
+  line-height: 1;
+}
+
+.Ink-BlockHandles__btn:hover,
+.Ink-BlockHandles__grip:hover {
+  color: var(--ink-accent);
+  background: var(--ink-accent-soft);
+}
+
+.Ink-Slash {
+  position: absolute;
+  z-index: 5;
+  min-width: 12rem;
+  background: #fff;
+  border: 1px solid var(--ink-border);
+  border-radius: 0.65rem;
+  box-shadow: 0 12px 32px rgb(15 23 42 / 0.12);
+  padding: 0.3rem;
+}
+
+.Ink-Slash__item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  padding: 0.45rem 0.6rem;
+  border-radius: 0.4rem;
+  cursor: pointer;
+  color: inherit;
+}
+
+.Ink-Slash__item:hover {
+  background: var(--ink-accent-soft);
+  color: var(--ink-accent);
+}
+
+.Ink-TrackBar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.45rem 0.75rem;
+  border-bottom: 1px solid var(--ink-border);
+  background: #fffbeb;
+  font-size: 0.8rem;
+}
+
+.Ink-TrackBar__label {
+  font-weight: 650;
+  color: #92400e;
+}
+
+.Ink-TrackBar__actions {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.Ink-TrackBar__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  width: 100%;
+}
+
+.Ink-TrackBar__list li {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: #fff;
+  border: 1px solid #fde68a;
+  border-radius: 0.45rem;
+  padding: 0.2rem 0.35rem;
+}
+
+.Ink-Comments {
+  width: 300px;
+  flex: 0 0 300px;
+  border-left: 1px solid var(--ink-border);
+  background: #fcfcfd;
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+}
+
+.Ink-Comments__header,
+.Ink-Ai__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.65rem 0.75rem;
+  border-bottom: 1px solid var(--ink-border);
+  font-size: 0.9rem;
+}
+
+.Ink-Comments__list {
+  overflow: auto;
+  padding: 0.65rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.Ink-Comments__empty,
+.Ink-Ai__empty,
+.Ink-Ai__hint {
+  color: var(--ink-muted);
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
+
+.Ink-Comments__thread {
+  border: 1px solid var(--ink-border);
+  border-radius: 0.65rem;
+  padding: 0.65rem;
+  background: #fff;
+  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
+}
+
+.Ink-Comments__thread--resolved {
+  opacity: 0.65;
+}
+
+.Ink-Comments__meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  font-size: 0.72rem;
+  color: var(--ink-muted);
+  margin-bottom: 0.35rem;
+}
+
+.Ink-Comments__body {
+  margin: 0;
+  font-size: 0.88rem;
+}
+
+.Ink-Comments__reply {
+  margin-top: 0.5rem;
+  padding-left: 0.65rem;
+  border-left: 2px solid var(--ink-accent-soft);
+}
+
+.Ink-Comments__form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  margin-top: 0.55rem;
+}
+
+.Ink-Comments__form input,
+.Ink-Ai__form input,
+.Ink-Ai__translate select {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: 1px solid var(--ink-border);
+  border-radius: 0.45rem;
+  padding: 0.4rem 0.5rem;
+  font: inherit;
+}
+
+.Ink-Comments__resolved {
+  margin: 0.4rem 0 0;
+  font-size: 0.75rem;
+  color: var(--ink-muted);
+}
+
+.Ink-Ai {
+  width: 320px;
+  flex: 0 0 320px;
+  border-left: 1px solid var(--ink-ai-border, var(--ink-border));
+  background: var(--ink-ai-surface, #f8fafc);
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+}
+
+.Ink-Ai[data-placement='floating'] {
+  position: absolute;
+  right: 1rem;
+  top: 3.5rem;
+  z-index: 6;
+  border: 1px solid var(--ink-ai-border, var(--ink-border));
+  border-radius: 0.85rem;
+  box-shadow: 0 16px 40px rgb(15 23 42 / 0.14);
+  max-height: min(28rem, 70vh);
+}
+
+.Ink-Ai[data-placement='drawer'] {
+  position: absolute;
+  inset: 0 0 0 auto;
+  z-index: 6;
+  box-shadow: -8px 0 24px rgb(15 23 42 / 0.08);
+}
+
+.Ink-Ai__tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.2rem;
+  padding: 0.4rem 0.55rem;
+  border-bottom: 1px solid var(--ink-ai-border, var(--ink-border));
+}
+
+.Ink-Ai__body {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 0.65rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.Ink-Ai__history {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  min-height: 8rem;
+}
+
+.Ink-Ai__turn {
+  border-radius: 0.55rem;
+  padding: 0.5rem 0.6rem;
+  background: #fff;
+  border: 1px solid var(--ink-border);
+  font-size: 0.85rem;
+}
+
+.Ink-Ai__turn span {
+  display: block;
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ink-muted);
+  margin-bottom: 0.2rem;
+}
+
+.Ink-Ai__turn p {
+  margin: 0;
+}
+
+.Ink-Ai__turn--user {
+  border-color: rgb(13 148 136 / 0.35);
+  background: rgb(13 148 136 / 0.06);
+}
+
+.Ink-Ai__form,
+.Ink-Ai__diff-actions,
+.Ink-Ai__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.Ink-Ai__action {
+  width: 100%;
+  justify-content: flex-start;
+  text-align: left;
+  background: #fff;
+  border: 1px solid var(--ink-border) !important;
+}
+
+.Ink-Ai__suggestion {
+  border: 1px solid var(--ink-border);
+  border-radius: 0.55rem;
+  padding: 0.55rem;
+  background: #fff;
+  font-size: 0.85rem;
+}
+
+.Ink-Ai__suggestion--warning {
+  border-color: #fbbf24;
+}
+
+.Ink-Ai__suggestion--error {
+  border-color: #f87171;
+}
+
+.Ink-Ai__suggestion p {
+  margin: 0.25rem 0;
+}
+
+.Ink-Ai__suggestion code {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--ink-muted);
+}
+
+.Ink-Ai__translate label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  font-size: 0.8rem;
+  color: var(--ink-muted);
+}
+
+.Ink-Ai__diff {
+  border: 1px solid rgb(13 148 136 / 0.35);
+  border-radius: 0.65rem;
+  padding: 0.65rem;
+  background: #fff;
+}
+
+.Ink-Ai__diff-preview {
+  margin: 0.4rem 0;
+  padding: 0.45rem;
+  border-radius: 0.4rem;
+  background: rgb(13 148 136 / 0.06);
+  font-size: 0.85rem;
+}
+
+.Ink-Ai__footer {
+  padding: 0.4rem 0.75rem;
+  border-top: 1px solid var(--ink-ai-border, var(--ink-border));
+  font-size: 0.7rem;
+  color: var(--ink-muted);
+}
+
+@media (max-width: 900px) {
+  .Ink-Editor__shell {
+    flex-direction: column;
+  }
+
+  .Ink-Comments,
+  .Ink-Ai {
+    width: 100%;
+    flex: none;
+    border-left: 0;
+    border-top: 1px solid var(--ink-border);
+    max-height: 16rem;
+  }
+
+  .Ink-Ai[data-placement='floating'],
+  .Ink-Ai[data-placement='drawer'] {
+    position: static;
+    box-shadow: none;
+    max-height: 16rem;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .Ink-Editor {
     --ink-border: #3f3f46;
@@ -145,6 +589,7 @@
     --ink-muted: #a1a1aa;
     --ink-accent: #2dd4bf;
     --ink-accent-soft: rgb(45 212 191 / 0.15);
+    --ink-shadow: 0 10px 40px rgb(0 0 0 / 0.35);
   }
 }
 
@@ -157,7 +602,7 @@
   --ink-muted: #6b7280;
   --ink-accent: #0f766e;
   --ink-accent-soft: #ccfbf1;
-  border-radius: 0.25rem;
+  border-radius: 0.75rem;
 }
 
 .ink-theme-bubble .Ink-Editor,
@@ -198,6 +643,6 @@
 }
 
 .ink-theme-minimal .Ink-Editor__toolbar,
-.Ink-Editor.ink-theme-minimal .Ink-Editor__toolbar {
-  border-bottom-style: dashed;
+.ink-theme-minimal.Ink-Editor .Ink-Editor__toolbar {
+  border-bottom: 1px solid var(--ink-border);
 }

package/dist/types/ai.types.d.ts

@@ -1,13 +1,67 @@
-export type InkAiCapability = 'rewrite' | 'summarize' | 'expand' | 'tone' | 'translate';
+import { InkAiPlacement } from './features.types';
+export type InkAiCapability = 'chat' | 'rewrite' | 'summarize' | 'expand' | 'tone' | 'translate' | 'review' | 'quickAction' | 'suggestDiff';
+export interface InkAiChatTurn {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    timestamp: number;
+    capability?: InkAiCapability;
+}
+export interface InkAiDiffSuggestion {
+    id: string;
+    originalHtml: string;
+    suggestedHtml: string;
+    summary: string;
+}
+export interface InkAiReviewSuggestion {
+    id: string;
+    message: string;
+    severity: 'info' | 'warning' | 'error';
+    originalText: string;
+    suggestedText: string;
+}
 export interface InkAiRequest {
     capability: InkAiCapability;
     html: string;
     selectionHtml?: string;
+    prompt?: string;
+    history?: InkAiChatTurn[];
     options?: Record<string, string>;
+    modelId?: string;
+    contextFiles?: InkAiContextFile[];
+    documentSnapshot?: InkAiDocumentSnapshot;
 }
 export interface InkAiResponse {
-    html: string;
+    html?: string;
+    text?: string;
     meta?: Record<string, string>;
+    diff?: InkAiDiffSuggestion;
+    reviewSuggestions?: InkAiReviewSuggestion[];
+    turns?: InkAiChatTurn[];
+}
+export interface InkAiContextFile {
+    id: string;
+    name: string;
+    mimeType: string;
+    content: string;
+}
+export interface InkAiDocumentSnapshot {
+    html: string;
+    selectionHtml?: string;
+    commentCount?: number;
+    trackChangeCount?: number;
+}
+export interface InkAiModelCatalogEntry {
+    id: string;
+    provider: 'anthropic' | 'google' | 'openai' | 'custom' | 'demo';
+    label: string;
+    family: string;
+}
+export interface InkAiProvider {
+    id: string;
+    name: string;
+    models: InkAiModelCatalogEntry[];
+    run: (request: InkAiRequest) => Promise<InkAiResponse>;
 }
 export interface InkAiAgent {
     id: string;
@@ -15,11 +69,66 @@ export interface InkAiAgent {
     capabilities: InkAiCapability[];
     run: (request: InkAiRequest) => Promise<InkAiResponse>;
 }
+export interface InkAiCostControlHooks {
+    cacheGet?: (key: string) => Promise<InkAiResponse | undefined>;
+    cacheSet?: (key: string, value: InkAiResponse) => Promise<void>;
+    rateLimitCheck?: (key: string) => Promise<boolean>;
+    preferCheaperModel?: (capability: InkAiCapability, modelId?: string) => string | undefined;
+}
+export interface InkAiModerationHook {
+    screen: (request: InkAiRequest) => Promise<{
+        allowed: boolean;
+        reason?: string;
+    }>;
+}
+export interface InkAiPermissionsHook {
+    canUse: (capability: InkAiCapability, modelId?: string) => boolean;
+}
+export interface InkAiExternalKnowledgeHook {
+    retrieve: (query: string) => Promise<string[]>;
+}
+export interface InkAiQualityEvalHook {
+    evaluate: (request: InkAiRequest, response: InkAiResponse) => Promise<{
+        score: number;
+        notes?: string;
+    }>;
+}
+export interface InkAiFallbackChain {
+    providerIds: string[];
+}
+export interface InkAiUiTheme {
+    accent?: string;
+    surface?: string;
+    border?: string;
+    className?: string;
+}
+export interface InkAiConfig {
+    enabled?: boolean;
+    placement?: InkAiPlacement;
+    openOnInit?: boolean;
+    providerId?: string;
+    modelId?: string;
+    uiTheme?: InkAiUiTheme;
+    className?: string;
+    showHistory?: boolean;
+    costControl?: InkAiCostControlHooks;
+    moderation?: InkAiModerationHook;
+    permissions?: InkAiPermissionsHook;
+    externalKnowledge?: InkAiExternalKnowledgeHook;
+    qualityEval?: InkAiQualityEvalHook;
+    fallbackChain?: InkAiFallbackChain;
+}
 export interface InkAiPlugin {
     register: (agent: InkAiAgent) => void;
     unregister: (agentId: string) => void;
     getAgent: (agentId: string) => InkAiAgent | undefined;
     listAgents: () => InkAiAgent[];
     run: (agentId: string, request: InkAiRequest) => Promise<InkAiResponse>;
+    registerProvider: (provider: InkAiProvider) => void;
+    unregisterProvider: (providerId: string) => void;
+    getProvider: (providerId: string) => InkAiProvider | undefined;
+    listProviders: () => InkAiProvider[];
+    runProvider: (providerId: string, request: InkAiRequest) => Promise<InkAiResponse>;
+    exportHistory: (turns: InkAiChatTurn[]) => string;
 }
 //# sourceMappingURL=ai.types.d.ts.map