@forgedevstack/ink 1.0.1 → 1.1.1

package/dist/styles.css

@@ -1,17 +1,50 @@
 .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-font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  --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: var(--ink-font-family);
+}
+
+.Ink-Editor[data-wysiwyg='true'] .Ink-Editor__content {
+  font-family: inherit;
+  line-height: 1.65;
+}
+
+.Ink-Editor[data-wysiwyg='true'] .Ink-Editor__content img {
+  max-width: 100%;
+  height: auto;
+}
+
+.Ink-Editor[data-wysiwyg='true'] .Ink-Editor__content table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.Ink-Editor[data-wysiwyg='true'] .Ink-Editor__content th,
+.Ink-Editor[data-wysiwyg='true'] .Ink-Editor__content td {
+  border: 1px solid var(--ink-border);
+  padding: 0.4rem 0.6rem;
+}
+
+.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 +56,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 +67,7 @@
   border: 0;
   background: transparent;
   color: inherit;
-  border-radius: 0.375rem;
+  border-radius: 0.45rem;
   cursor: pointer;
 }
 
@@ -42,12 +75,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 +92,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 +132,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 +168,7 @@
 .Ink-Editor__content img {
   max-width: 100%;
   height: auto;
+  border-radius: 0.35rem;
 }
 
 .Ink-Editor__content h1,
@@ -116,7 +177,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 +186,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 +240,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 +611,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 +624,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 +665,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);
 }