@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/writing/WritingStyleManager.tsx

@@ -1,416 +1,416 @@
-import { Button } from '../components/common/buttons/Button.js'
-import { QuietDisclosure } from '../components/common/containers/QuietDisclosure.js'
-import { Checkbox } from '../components/common/inputs/Checkbox.js'
-import { TextAreaField } from '../components/common/inputs/TextAreaField.js'
-import { TextField } from '../components/common/inputs/TextField.js'
-import { useCallback, useState } from 'react'
-import { styled } from 'styled-components'
-import { condenseWritingStyleWithAgent } from './condenseWritingStyle.js'
-import {
-  createStyleSource,
-  createWritingStyle,
-  styleHasContent,
-  styleRawGuidance,
-  type StyleSource,
-  type WritingStyle,
-} from './writingStyle.js'
-
-//#region styled-components
-
-const StyledRoot = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--platform-spacing-sm);
-`
-
-const StyledHint = styled.p`
-  margin: 0;
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-xs);
-  line-height: 1.4;
-`
-
-const StyledChips = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-`
-
-const StyledEmpty = styled.span`
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-xs);
-`
-
-const StyledCard = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--platform-spacing-sm);
-  padding: var(--platform-spacing-sm) 0;
-  border-top: 1px solid rgb(from var(--platform-colors-border) r g b / 0.6);
-`
-
-const StyledRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: var(--platform-spacing-sm);
-`
-
-const StyledSourceText = styled(TextAreaField)`
-  min-height: 72px;
-`
-
-const StyledSkillText = styled(TextAreaField)`
-  min-height: 72px;
-`
-
-const StyledSubLabel = styled.span`
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-xs);
-  font-weight: var(--platform-typography-font-weight-bold);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-`
-
-const StyledToggle = styled.label`
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--platform-typography-font-size-sm);
-  color: var(--platform-colors-text-primary);
-`
-
-const StyledError = styled.span`
-  color: var(--platform-colors-danger-text, var(--platform-colors-danger));
-  font-size: var(--platform-typography-font-size-xs);
-`
-
-const StyledSpacer = styled.div`
-  flex: 1;
-`
-
-//#endregion
-
-export interface WritingStyleManagerProps {
-  styles: WritingStyle[]
-  selectedIds: string[]
-  disabled?: boolean
-  onChange: (next: WritingStyle[]) => void
-  onSelectedChange: (ids: string[]) => void
-}
-
-export function WritingStyleManager({
-  styles,
-  selectedIds,
-  disabled = false,
-  onChange,
-  onSelectedChange,
-}: WritingStyleManagerProps): React.ReactElement {
-  const [distilling, setDistilling] = useState<Record<string, boolean>>({})
-  const [errors, setErrors] = useState<Record<string, string>>({})
-
-  const patchStyle = useCallback(
-    (id: string, patch: Partial<WritingStyle>) =>
-      onChange(
-        styles.map(style => (style.id === id ? { ...style, ...patch } : style)),
-      ),
-    [onChange, styles],
-  )
-
-  const patchSource = useCallback(
-    (styleId: string, sourceId: string, patch: Partial<StyleSource>) =>
-      onChange(
-        styles.map(style =>
-          style.id === styleId
-            ? {
-                ...style,
-                sources: style.sources.map(source =>
-                  source.id === sourceId ? { ...source, ...patch } : source,
-                ),
-              }
-            : style,
-        ),
-      ),
-    [onChange, styles],
-  )
-
-  const addStyle = useCallback(() => {
-    const style = createWritingStyle(`Style ${styles.length + 1}`)
-    onChange([...styles, style])
-    onSelectedChange([...selectedIds, style.id])
-  }, [onChange, onSelectedChange, selectedIds, styles])
-
-  const removeStyle = useCallback(
-    (id: string) => {
-      onChange(styles.filter(style => style.id !== id))
-      onSelectedChange(selectedIds.filter(entry => entry !== id))
-    },
-    [onChange, onSelectedChange, selectedIds, styles],
-  )
-
-  const addSource = useCallback(
-    (styleId: string) => {
-      const style = styles.find(entry => entry.id === styleId)
-      if (!style) return
-      patchStyle(styleId, {
-        sources: [
-          ...style.sources,
-          createStyleSource(`Sample ${style.sources.length + 1}`),
-        ],
-      })
-    },
-    [patchStyle, styles],
-  )
-
-  const removeSource = useCallback(
-    (styleId: string, sourceId: string) => {
-      const style = styles.find(entry => entry.id === styleId)
-      if (!style) return
-      patchStyle(styleId, {
-        sources: style.sources.filter(source => source.id !== sourceId),
-      })
-    },
-    [patchStyle, styles],
-  )
-
-  const toggleSelected = useCallback(
-    (id: string) =>
-      onSelectedChange(
-        selectedIds.includes(id)
-          ? selectedIds.filter(entry => entry !== id)
-          : [...selectedIds, id],
-      ),
-    [onSelectedChange, selectedIds],
-  )
-
-  const distill = useCallback(
-    async (style: WritingStyle) => {
-      const raw = styleRawGuidance(style)
-      if (!raw.trim()) {
-        setErrors(current => ({
-          ...current,
-          [style.id]: 'Add a writing sample or some notes first.',
-        }))
-        return
-      }
-      setErrors(current => ({ ...current, [style.id]: '' }))
-      setDistilling(current => ({ ...current, [style.id]: true }))
-      try {
-        const skill = await condenseWritingStyleWithAgent(raw)
-        patchStyle(style.id, { skill, skillEnabled: true })
-      } catch (cause) {
-        setErrors(current => ({
-          ...current,
-          [style.id]:
-            cause instanceof Error ? cause.message : 'Could not distill the style.',
-        }))
-      } finally {
-        setDistilling(current => ({ ...current, [style.id]: false }))
-      }
-    },
-    [patchStyle],
-  )
-
-  return (
-    <StyledRoot>
-      <StyledHint>
-        Your own named styles guide the agent’s voice — never the book’s content.
-        Pick which apply to this draft. Saved across books; manage them below.
-      </StyledHint>
-
-      <StyledChips>
-        {styles.length === 0 ? (
-          <StyledEmpty>No styles yet — add one below.</StyledEmpty>
-        ) : (
-          styles.map(style => (
-            <Button
-              key={style.id}
-              type="button"
-              variant="text"
-              size="sm"
-              selected={selectedIds.includes(style.id)}
-              disabled={disabled || !styleHasContent(style)}
-              title={
-                style.skillEnabled && style.skill.trim()
-                  ? 'Applies the distilled skill'
-                  : 'Applies your samples and notes'
-              }
-              onClick={() => toggleSelected(style.id)}
-            >
-              {style.name}
-              {style.skillEnabled && style.skill.trim() ? ' · skill' : ''}
-            </Button>
-          ))
-        )}
-      </StyledChips>
-
-      <QuietDisclosure summary="Manage styles">
-        {styles.map(style => {
-          const busy = distilling[style.id] === true
-          const error = errors[style.id]
-          return (
-            <StyledCard key={style.id}>
-              <StyledRow>
-                <TextField
-                  value={style.name}
-                  disabled={disabled}
-                  placeholder="Style name (e.g. Documentation, Fiction)"
-                  aria-label="Style name"
-                  onChange={event =>
-                    patchStyle(style.id, { name: event.target.value })
-                  }
-                />
-                <Button
-                  type="button"
-                  variant="text"
-                  size="sm"
-                  disabled={disabled}
-                  onClick={() => removeStyle(style.id)}
-                >
-                  Remove
-                </Button>
-              </StyledRow>
-
-              <StyledSubLabel>Sources (your writing samples)</StyledSubLabel>
-              {style.sources.map(source => (
-                <div key={source.id}>
-                  <StyledRow>
-                    <TextField
-                      value={source.label}
-                      disabled={disabled}
-                      placeholder="Label (e.g. my essays)"
-                      aria-label="Sample label"
-                      onChange={event =>
-                        patchSource(style.id, source.id, {
-                          label: event.target.value,
-                        })
-                      }
-                    />
-                    <Button
-                      type="button"
-                      variant="text"
-                      size="sm"
-                      disabled={disabled}
-                      onClick={() => removeSource(style.id, source.id)}
-                    >
-                      Remove
-                    </Button>
-                  </StyledRow>
-                  <StyledSourceText
-                    value={source.text}
-                    disabled={disabled}
-                    placeholder="Paste a paragraph or two written in your voice…"
-                    aria-label="Sample text"
-                    onChange={event =>
-                      patchSource(style.id, source.id, {
-                        text: event.target.value,
-                      })
-                    }
-                  />
-                </div>
-              ))}
-              <StyledRow>
-                <Button
-                  type="button"
-                  variant="subtle"
-                  size="sm"
-                  disabled={disabled}
-                  onClick={() => addSource(style.id)}
-                >
-                  Add sample
-                </Button>
-              </StyledRow>
-
-              <StyledSubLabel>Notes (your own rules)</StyledSubLabel>
-              <TextAreaField
-                value={style.notes}
-                disabled={disabled}
-                placeholder="e.g. short sentences, active voice, no jargon, warm but precise…"
-                aria-label="Style notes"
-                onChange={event =>
-                  patchStyle(style.id, { notes: event.target.value })
-                }
-              />
-
-              <StyledSubLabel>Prefer words (whitelist)</StyledSubLabel>
-              <TextField
-                value={style.include}
-                disabled={disabled}
-                placeholder="Words/phrases to favour, comma-separated"
-                aria-label="Words to prefer"
-                onChange={event =>
-                  patchStyle(style.id, { include: event.target.value })
-                }
-              />
-
-              <StyledSubLabel>Avoid words (blacklist)</StyledSubLabel>
-              <TextField
-                value={style.exclude}
-                disabled={disabled}
-                placeholder="Words/phrases to avoid, comma-separated"
-                aria-label="Words to avoid"
-                onChange={event =>
-                  patchStyle(style.id, { exclude: event.target.value })
-                }
-              />
-
-              <StyledRow>
-                <Button
-                  type="button"
-                  variant="primary"
-                  size="sm"
-                  loading={busy}
-                  disabled={disabled || busy}
-                  onClick={() => void distill(style)}
-                >
-                  {style.skill.trim()
-                    ? 'Re-distill into skill'
-                    : 'Distill into skill'}
-                </Button>
-                {style.skill.trim() ? (
-                  <StyledToggle>
-                    <Checkbox
-                      checked={style.skillEnabled}
-                      disabled={disabled}
-                      onChange={event =>
-                        patchStyle(style.id, {
-                          skillEnabled: event.target.checked,
-                        })
-                      }
-                    />
-                    Use skill
-                  </StyledToggle>
-                ) : null}
-                <StyledSpacer />
-                {error ? <StyledError>{error}</StyledError> : null}
-              </StyledRow>
-              {style.skill.trim() ? (
-                <>
-                  <StyledSubLabel>Skill (distilled — editable)</StyledSubLabel>
-                  <StyledSkillText
-                    value={style.skill}
-                    disabled={disabled}
-                    aria-label="Distilled style skill"
-                    onChange={event =>
-                      patchStyle(style.id, { skill: event.target.value })
-                    }
-                  />
-                </>
-              ) : null}
-            </StyledCard>
-          )
-        })}
-        <StyledCard>
-          <Button
-            type="button"
-            variant="subtle"
-            size="sm"
-            disabled={disabled}
-            onClick={addStyle}
-          >
-            Add style
-          </Button>
-        </StyledCard>
-      </QuietDisclosure>
-    </StyledRoot>
-  )
-}
+import { Button } from '../components/common/buttons/Button.js'
+import { QuietDisclosure } from '../components/common/containers/QuietDisclosure.js'
+import { Checkbox } from '../components/common/inputs/Checkbox.js'
+import { TextAreaField } from '../components/common/inputs/TextAreaField.js'
+import { TextField } from '../components/common/inputs/TextField.js'
+import { useCallback, useState } from 'react'
+import { styled } from 'styled-components'
+import { condenseWritingStyleWithAgent } from './condenseWritingStyle.js'
+import {
+  createStyleSource,
+  createWritingStyle,
+  styleHasContent,
+  styleRawGuidance,
+  type StyleSource,
+  type WritingStyle,
+} from './writingStyle.js'
+
+//#region styled-components
+
+const StyledRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+`
+
+const StyledHint = styled.p`
+  margin: 0;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  line-height: 1.4;
+`
+
+const StyledChips = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+`
+
+const StyledEmpty = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+`
+
+const StyledCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+  padding: var(--platform-spacing-sm) 0;
+  border-top: 1px solid rgb(from var(--platform-colors-border) r g b / 0.6);
+`
+
+const StyledRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-sm);
+`
+
+const StyledSourceText = styled(TextAreaField)`
+  min-height: 72px;
+`
+
+const StyledSkillText = styled(TextAreaField)`
+  min-height: 72px;
+`
+
+const StyledSubLabel = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: var(--platform-typography-font-weight-bold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+`
+
+const StyledToggle = styled.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--platform-typography-font-size-sm);
+  color: var(--platform-colors-text-primary);
+`
+
+const StyledError = styled.span`
+  color: var(--platform-colors-danger-text, var(--platform-colors-danger));
+  font-size: var(--platform-typography-font-size-xs);
+`
+
+const StyledSpacer = styled.div`
+  flex: 1;
+`
+
+//#endregion
+
+export interface WritingStyleManagerProps {
+  styles: WritingStyle[]
+  selectedIds: string[]
+  disabled?: boolean
+  onChange: (next: WritingStyle[]) => void
+  onSelectedChange: (ids: string[]) => void
+}
+
+export function WritingStyleManager({
+  styles,
+  selectedIds,
+  disabled = false,
+  onChange,
+  onSelectedChange,
+}: WritingStyleManagerProps): React.ReactElement {
+  const [distilling, setDistilling] = useState<Record<string, boolean>>({})
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const patchStyle = useCallback(
+    (id: string, patch: Partial<WritingStyle>) =>
+      onChange(
+        styles.map(style => (style.id === id ? { ...style, ...patch } : style)),
+      ),
+    [onChange, styles],
+  )
+
+  const patchSource = useCallback(
+    (styleId: string, sourceId: string, patch: Partial<StyleSource>) =>
+      onChange(
+        styles.map(style =>
+          style.id === styleId
+            ? {
+                ...style,
+                sources: style.sources.map(source =>
+                  source.id === sourceId ? { ...source, ...patch } : source,
+                ),
+              }
+            : style,
+        ),
+      ),
+    [onChange, styles],
+  )
+
+  const addStyle = useCallback(() => {
+    const style = createWritingStyle(`Style ${styles.length + 1}`)
+    onChange([...styles, style])
+    onSelectedChange([...selectedIds, style.id])
+  }, [onChange, onSelectedChange, selectedIds, styles])
+
+  const removeStyle = useCallback(
+    (id: string) => {
+      onChange(styles.filter(style => style.id !== id))
+      onSelectedChange(selectedIds.filter(entry => entry !== id))
+    },
+    [onChange, onSelectedChange, selectedIds, styles],
+  )
+
+  const addSource = useCallback(
+    (styleId: string) => {
+      const style = styles.find(entry => entry.id === styleId)
+      if (!style) return
+      patchStyle(styleId, {
+        sources: [
+          ...style.sources,
+          createStyleSource(`Sample ${style.sources.length + 1}`),
+        ],
+      })
+    },
+    [patchStyle, styles],
+  )
+
+  const removeSource = useCallback(
+    (styleId: string, sourceId: string) => {
+      const style = styles.find(entry => entry.id === styleId)
+      if (!style) return
+      patchStyle(styleId, {
+        sources: style.sources.filter(source => source.id !== sourceId),
+      })
+    },
+    [patchStyle, styles],
+  )
+
+  const toggleSelected = useCallback(
+    (id: string) =>
+      onSelectedChange(
+        selectedIds.includes(id)
+          ? selectedIds.filter(entry => entry !== id)
+          : [...selectedIds, id],
+      ),
+    [onSelectedChange, selectedIds],
+  )
+
+  const distill = useCallback(
+    async (style: WritingStyle) => {
+      const raw = styleRawGuidance(style)
+      if (!raw.trim()) {
+        setErrors(current => ({
+          ...current,
+          [style.id]: 'Add a writing sample or some notes first.',
+        }))
+        return
+      }
+      setErrors(current => ({ ...current, [style.id]: '' }))
+      setDistilling(current => ({ ...current, [style.id]: true }))
+      try {
+        const skill = await condenseWritingStyleWithAgent(raw)
+        patchStyle(style.id, { skill, skillEnabled: true })
+      } catch (cause) {
+        setErrors(current => ({
+          ...current,
+          [style.id]:
+            cause instanceof Error ? cause.message : 'Could not distill the style.',
+        }))
+      } finally {
+        setDistilling(current => ({ ...current, [style.id]: false }))
+      }
+    },
+    [patchStyle],
+  )
+
+  return (
+    <StyledRoot>
+      <StyledHint>
+        Your own named styles guide the agent’s voice — never the book’s content.
+        Pick which apply to this draft. Saved across books; manage them below.
+      </StyledHint>
+
+      <StyledChips>
+        {styles.length === 0 ? (
+          <StyledEmpty>No styles yet — add one below.</StyledEmpty>
+        ) : (
+          styles.map(style => (
+            <Button
+              key={style.id}
+              type="button"
+              variant="text"
+              size="sm"
+              selected={selectedIds.includes(style.id)}
+              disabled={disabled || !styleHasContent(style)}
+              title={
+                style.skillEnabled && style.skill.trim()
+                  ? 'Applies the distilled skill'
+                  : 'Applies your samples and notes'
+              }
+              onClick={() => toggleSelected(style.id)}
+            >
+              {style.name}
+              {style.skillEnabled && style.skill.trim() ? ' · skill' : ''}
+            </Button>
+          ))
+        )}
+      </StyledChips>
+
+      <QuietDisclosure summary="Manage styles">
+        {styles.map(style => {
+          const busy = distilling[style.id] === true
+          const error = errors[style.id]
+          return (
+            <StyledCard key={style.id}>
+              <StyledRow>
+                <TextField
+                  value={style.name}
+                  disabled={disabled}
+                  placeholder="Style name (e.g. Documentation, Fiction)"
+                  aria-label="Style name"
+                  onChange={event =>
+                    patchStyle(style.id, { name: event.target.value })
+                  }
+                />
+                <Button
+                  type="button"
+                  variant="text"
+                  size="sm"
+                  disabled={disabled}
+                  onClick={() => removeStyle(style.id)}
+                >
+                  Remove
+                </Button>
+              </StyledRow>
+
+              <StyledSubLabel>Sources (your writing samples)</StyledSubLabel>
+              {style.sources.map(source => (
+                <div key={source.id}>
+                  <StyledRow>
+                    <TextField
+                      value={source.label}
+                      disabled={disabled}
+                      placeholder="Label (e.g. my essays)"
+                      aria-label="Sample label"
+                      onChange={event =>
+                        patchSource(style.id, source.id, {
+                          label: event.target.value,
+                        })
+                      }
+                    />
+                    <Button
+                      type="button"
+                      variant="text"
+                      size="sm"
+                      disabled={disabled}
+                      onClick={() => removeSource(style.id, source.id)}
+                    >
+                      Remove
+                    </Button>
+                  </StyledRow>
+                  <StyledSourceText
+                    value={source.text}
+                    disabled={disabled}
+                    placeholder="Paste a paragraph or two written in your voice…"
+                    aria-label="Sample text"
+                    onChange={event =>
+                      patchSource(style.id, source.id, {
+                        text: event.target.value,
+                      })
+                    }
+                  />
+                </div>
+              ))}
+              <StyledRow>
+                <Button
+                  type="button"
+                  variant="subtle"
+                  size="sm"
+                  disabled={disabled}
+                  onClick={() => addSource(style.id)}
+                >
+                  Add sample
+                </Button>
+              </StyledRow>
+
+              <StyledSubLabel>Notes (your own rules)</StyledSubLabel>
+              <TextAreaField
+                value={style.notes}
+                disabled={disabled}
+                placeholder="e.g. short sentences, active voice, no jargon, warm but precise…"
+                aria-label="Style notes"
+                onChange={event =>
+                  patchStyle(style.id, { notes: event.target.value })
+                }
+              />
+
+              <StyledSubLabel>Prefer words (whitelist)</StyledSubLabel>
+              <TextField
+                value={style.include}
+                disabled={disabled}
+                placeholder="Words/phrases to favour, comma-separated"
+                aria-label="Words to prefer"
+                onChange={event =>
+                  patchStyle(style.id, { include: event.target.value })
+                }
+              />
+
+              <StyledSubLabel>Avoid words (blacklist)</StyledSubLabel>
+              <TextField
+                value={style.exclude}
+                disabled={disabled}
+                placeholder="Words/phrases to avoid, comma-separated"
+                aria-label="Words to avoid"
+                onChange={event =>
+                  patchStyle(style.id, { exclude: event.target.value })
+                }
+              />
+
+              <StyledRow>
+                <Button
+                  type="button"
+                  variant="primary"
+                  size="sm"
+                  loading={busy}
+                  disabled={disabled || busy}
+                  onClick={() => void distill(style)}
+                >
+                  {style.skill.trim()
+                    ? 'Re-distill into skill'
+                    : 'Distill into skill'}
+                </Button>
+                {style.skill.trim() ? (
+                  <StyledToggle>
+                    <Checkbox
+                      checked={style.skillEnabled}
+                      disabled={disabled}
+                      onChange={event =>
+                        patchStyle(style.id, {
+                          skillEnabled: event.target.checked,
+                        })
+                      }
+                    />
+                    Use skill
+                  </StyledToggle>
+                ) : null}
+                <StyledSpacer />
+                {error ? <StyledError>{error}</StyledError> : null}
+              </StyledRow>
+              {style.skill.trim() ? (
+                <>
+                  <StyledSubLabel>Skill (distilled — editable)</StyledSubLabel>
+                  <StyledSkillText
+                    value={style.skill}
+                    disabled={disabled}
+                    aria-label="Distilled style skill"
+                    onChange={event =>
+                      patchStyle(style.id, { skill: event.target.value })
+                    }
+                  />
+                </>
+              ) : null}
+            </StyledCard>
+          )
+        })}
+        <StyledCard>
+          <Button
+            type="button"
+            variant="subtle"
+            size="sm"
+            disabled={disabled}
+            onClick={addStyle}
+          >
+            Add style
+          </Button>
+        </StyledCard>
+      </QuietDisclosure>
+    </StyledRoot>
+  )
+}