diff --git a/.gitignore b/.gitignore index d12822c..73e1a1a 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,8 @@ CLAUDE.local.md .claude/settings.local.json .worktrees/ samples/ +.impeccable/review/ +.impeccable/mocks/ +.impeccable/build/ +.impeccable/config.local.json +.superpowers/ diff --git a/.impeccable/design.json b/.impeccable/design.json new file mode 100644 index 0000000..e943627 --- /dev/null +++ b/.impeccable/design.json @@ -0,0 +1,657 @@ +{ + "schemaVersion": 2, + "generatedAt": "2026-10-14T23:37:28+00:00", + "title": "Design System: MangaBaka Seeder", + "extensions": { + "colorMeta": { + "paper-page": { + "role": "neutral", + "displayName": "Book-Jacket Paper", + "purpose": "Page and middle-column ground (light).", + "canonical": "oklch(93.6% 0.015 80.7)", + "tonalRamp": [ + "#0d0b07", + "#28251f", + "#46413a", + "#656158", + "#878279", + "#a9a49c", + "#cdc8c1", + "#f2eee7" + ] + }, + "paper-panel": { + "role": "neutral", + "displayName": "Desk Paper", + "purpose": "Side desks (light).", + "canonical": "oklch(90.6% 0.019 83.1)", + "tonalRamp": [ + "#0e0b06", + "#29251d", + "#464138", + "#666056", + "#888276", + "#aaa49a", + "#cec8bf", + "#f3eee5" + ] + }, + "paper-slip": { + "role": "neutral", + "displayName": "Slip Paper", + "purpose": "Slips, obi bands, selects, ticks, chosen host row (light).", + "canonical": "oklch(96.8% 0.011 84.6)", + "tonalRamp": [ + "#0d0b08", + "#272520", + "#44423c", + "#64615a", + "#85827b", + "#a8a59e", + "#ccc9c3", + "#f1eee9" + ] + }, + "sumi-ink": { + "role": "neutral", + "displayName": "Sumi Ink", + "purpose": "Text, 3px rules, outline buttons, active view and plate (light).", + "canonical": "oklch(22.7% 0.014 298.4)", + "tonalRamp": [ + "#0c0a0f", + "#26242a", + "#434148", + "#626068", + "#838189", + "#a6a4ac", + "#cac8cf", + "#efedf4" + ] + }, + "sumi-ink-muted": { + "role": "neutral", + "displayName": "Faded Ink", + "purpose": "Labels, hints, band facts, inactive rows (light).", + "canonical": "oklch(44.0% 0.017 308.0)", + "tonalRamp": [ + "#0c0a0f", + "#27232a", + "#444048", + "#645f69", + "#85808a", + "#a7a3ac", + "#cbc7d0", + "#f1ecf5" + ] + }, + "obi-red": { + "role": "primary", + "displayName": "Obi Red", + "purpose": "Main cover band, stamps, failed plate, notice rule (light).", + "canonical": "oklch(57.9% 0.198 27.8)", + "tonalRamp": [ + "#310000", + "#5a0000", + "#860000", + "#b41718", + "#dd463c", + "#fe7467", + "#ffa091", + "#ffcbbc" + ] + }, + "obi-red-deep": { + "role": "primary", + "displayName": "Obi Red Deep", + "purpose": "Stamp hover, main band top rule (light).", + "canonical": "oklch(42.6% 0.150 28.2)", + "tonalRamp": [ + "#290000", + "#4f0000", + "#781a15", + "#a3382f", + "#ca5b4f", + "#eb8376", + "#ffac9f", + "#ffd5c8" + ] + }, + "obi-ink": { + "role": "primary", + "displayName": "Obi Ink", + "purpose": "Text on obi red, both schemes.", + "canonical": "oklch(98.8% 0.008 61.5)", + "tonalRamp": [ + "#0d0b09", + "#272422", + "#45413f", + "#64605d", + "#86817e", + "#a8a4a1", + "#ccc8c5", + "#f1eeeb" + ] + }, + "obi-red-text": { + "role": "primary", + "displayName": "Obi Red Text", + "purpose": "Small red text: year keys, errors, removed lines, link hover (light).", + "canonical": "oklch(47.2% 0.162 28.4)", + "tonalRamp": [ + "#2b0000", + "#520000", + "#7c120e", + "#a73229", + "#cf574a", + "#f08072", + "#ffa99b", + "#ffd2c5" + ] + }, + "rehost-teal": { + "role": "secondary", + "displayName": "Rehost Teal", + "purpose": "Done, rehosted, added, focus ring (light).", + "canonical": "oklch(49.9% 0.066 188.3)", + "tonalRamp": [ + "#00110f", + "#002d2a", + "#144c48", + "#316d68", + "#538f89", + "#7bb1ac", + "#a4d4cf", + "#cef9f4" + ] + }, + "kraft-rail": { + "role": "tertiary", + "displayName": "Kraft Rail", + "purpose": "Shelf rail, note bullets, scrollbar (light).", + "canonical": "oklch(70.8% 0.058 78.3)", + "tonalRamp": [ + "#140800", + "#312208", + "#513f22", + "#735e3c", + "#957f5c", + "#b7a282", + "#d9c6a9", + "#fdecd2" + ] + }, + "rail-lip": { + "role": "tertiary", + "displayName": "Rail Lip", + "purpose": "2px edge under the rail (light).", + "canonical": "oklch(52.9% 0.055 78.4)", + "tonalRamp": [ + "#130900", + "#30220b", + "#503f24", + "#725e3f", + "#947f5f", + "#b5a284", + "#d8c6ab", + "#fcecd3" + ] + }, + "hairline": { + "role": "neutral", + "displayName": "Hairline", + "purpose": "Dividers and box edges (light, translucent ink).", + "canonical": "rgba(29, 27, 34, 0.2)" + }, + "cover-frame": { + "role": "neutral", + "displayName": "Cover Frame", + "purpose": "1px inset frame on every cover; select edges (light).", + "canonical": "rgba(29, 27, 34, 0.35)" + }, + "track": { + "role": "neutral", + "displayName": "Track", + "purpose": "Seen-range and progress tracks (light).", + "canonical": "rgba(29, 27, 34, 0.12)" + }, + "cast-shadow": { + "role": "neutral", + "displayName": "Cast Shadow", + "purpose": "Book and panel shadow colour (light).", + "canonical": "rgba(29, 20, 10, 0.5)" + }, + "umber-page": { + "role": "neutral", + "displayName": "Warm Umber (dark)", + "purpose": "Page and middle-column ground (dark).", + "canonical": "oklch(26.8% 0.012 67.3)", + "tonalRamp": [ + "#0d0b08", + "#282420", + "#46413c", + "#66605b", + "#87817b", + "#a9a49e", + "#cdc8c3", + "#f2eee9" + ] + }, + "umber-panel": { + "role": "neutral", + "displayName": "Desk Paper (dark)", + "purpose": "Side desks (dark).", + "canonical": "oklch(30.2% 0.014 67.3)", + "tonalRamp": [ + "#0e0a07", + "#292420", + "#46413b", + "#66605a", + "#88817a", + "#aaa49d", + "#cec8c2", + "#f3ede8" + ] + }, + "umber-slip": { + "role": "neutral", + "displayName": "Slip Paper (dark)", + "purpose": "Slips, obi bands, selects, ticks, chosen host row (dark).", + "canonical": "oklch(33.0% 0.016 67.2)", + "tonalRamp": [ + "#0e0a07", + "#29241f", + "#47413b", + "#676058", + "#898179", + "#aba49c", + "#cfc8c1", + "#f3ede7" + ] + }, + "umber-ink": { + "role": "neutral", + "displayName": "Sumi Ink (dark)", + "purpose": "Text, 3px rules, outline buttons, active view and plate (dark).", + "canonical": "oklch(92.1% 0.021 81.8)", + "tonalRamp": [ + "#0e0b05", + "#29241c", + "#474137", + "#676055", + "#888175", + "#aba499", + "#cec8be", + "#f3eee4" + ] + }, + "umber-ink-muted": { + "role": "neutral", + "displayName": "Faded Ink (dark)", + "purpose": "Labels, hints, band facts, inactive rows (dark).", + "canonical": "oklch(76.8% 0.026 77.4)", + "tonalRamp": [ + "#0f0a04", + "#2a241a", + "#494135", + "#696052", + "#8b8172", + "#ada496", + "#d0c8bb", + "#f5ede2" + ] + }, + "umber-obi-red": { + "role": "primary", + "displayName": "Obi Red (dark)", + "purpose": "Main cover band, stamps, failed plate, notice rule (dark).", + "canonical": "oklch(54.1% 0.187 28.1)", + "tonalRamp": [ + "#2f0000", + "#580000", + "#830000", + "#b0221e", + "#d84c41", + "#fa786a", + "#ffa394", + "#ffcdbf" + ] + }, + "umber-obi-red-deep": { + "role": "primary", + "displayName": "Obi Red Deep (dark)", + "purpose": "Stamp hover, main band top rule (dark).", + "canonical": "oklch(42.6% 0.147 28.0)", + "tonalRamp": [ + "#290000", + "#4f0000", + "#771b16", + "#a23930", + "#c95c51", + "#ea8478", + "#ffaca0", + "#ffd5c9" + ] + }, + "umber-obi-red-text": { + "role": "primary", + "displayName": "Obi Red Text (dark)", + "purpose": "Small red text: year keys, errors, removed lines, link hover (dark).", + "canonical": "oklch(73.5% 0.134 26.9)", + "tonalRamp": [ + "#260000", + "#4c0305", + "#73211d", + "#9d3e38", + "#c36158", + "#e4887e", + "#ffafa5", + "#ffd8ce" + ] + }, + "umber-teal": { + "role": "secondary", + "displayName": "Rehost Teal (dark)", + "purpose": "Done, rehosted, added, focus ring (dark).", + "canonical": "oklch(71.8% 0.073 184.2)", + "tonalRamp": [ + "#00110e", + "#002d28", + "#0b4d46", + "#2a6e66", + "#4e9087", + "#77b2a9", + "#a1d6cd", + "#cbfaf2" + ] + }, + "umber-kraft-rail": { + "role": "tertiary", + "displayName": "Kraft Rail (dark)", + "purpose": "Shelf rail, note bullets, scrollbar (dark).", + "canonical": "oklch(48.0% 0.048 74.6)", + "tonalRamp": [ + "#130900", + "#30220f", + "#4f3f29", + "#715e44", + "#937f64", + "#b5a289", + "#d8c6af", + "#fcecd7" + ] + }, + "umber-rail-lip": { + "role": "tertiary", + "displayName": "Rail Lip (dark)", + "purpose": "2px edge under the rail (dark).", + "canonical": "oklch(36.6% 0.035 73.4)", + "tonalRamp": [ + "#110902", + "#2d2316", + "#4c4030", + "#6d5f4d", + "#8f806d", + "#b1a391", + "#d4c7b6", + "#f9ecde" + ] + }, + "umber-hairline": { + "role": "neutral", + "displayName": "Hairline (dark)", + "purpose": "Dividers and box edges (dark, translucent ink).", + "canonical": "rgba(236, 228, 214, 0.16)" + }, + "umber-cover-frame": { + "role": "neutral", + "displayName": "Cover Frame (dark)", + "purpose": "1px inset frame on every cover; select edges (dark).", + "canonical": "rgba(236, 228, 214, 0.35)" + }, + "umber-track": { + "role": "neutral", + "displayName": "Track (dark)", + "purpose": "Seen-range and progress tracks (dark).", + "canonical": "rgba(236, 228, 214, 0.14)" + }, + "umber-cast-shadow": { + "role": "neutral", + "displayName": "Cast Shadow (dark)", + "purpose": "Book and panel shadow colour (dark).", + "canonical": "rgba(0, 0, 0, 0.6)" + } + }, + "typographyMeta": { + "display": { + "displayName": "Display", + "purpose": "Series title over the review." + }, + "headline": { + "displayName": "Headline", + "purpose": "Empty-state statement." + }, + "title": { + "displayName": "Title", + "purpose": "Brand line on the left desk, over a 3px ink rule." + }, + "body": { + "displayName": "Body", + "purpose": "Base text and slip inputs." + }, + "body-small": { + "displayName": "Body Small", + "purpose": "Settings, buttons, host rows, status lines." + }, + "band": { + "displayName": "Band", + "purpose": "Obi band facts, notes and per-cover fields; tabular numerals." + }, + "label": { + "displayName": "Printed Label", + "purpose": "Tracked uppercase for desk caps, slip labels, band roles, stage plates." + }, + "stamp": { + "displayName": "Stamp", + "purpose": "Red stamp buttons only." + }, + "mono": { + "displayName": "Mono", + "purpose": "Paste-out text area and the catbox userhash." + } + }, + "shadows": [ + { + "name": "book-cast", + "value": "0 8px 14px -8px var(--mb-shadow)", + "purpose": "Under every cover image as it stands on its rail." + }, + { + "name": "rail-lip", + "value": "0 2px 0 var(--mb-rail)", + "purpose": "Edge of the kraft rail under each shelved book; furniture, not a card shadow." + }, + { + "name": "floating-panel", + "value": "0 18px 40px -18px var(--mb-shadow)", + "purpose": "Userscript panel over mangabaka.org only." + } + ], + "motion": [ + { + "name": "ease-shelve", + "value": "cubic-bezier(0.16, 1, 0.3, 1)", + "purpose": "Shelving a new run and an unselected book leaning back." + }, + { + "name": "shelve", + "value": "translateY(14px) and opacity 0.35 to rest, 0.55s, 28ms stagger capped at 24", + "purpose": "The one authored motion: covers shelved left to right after a run." + }, + { + "name": "plate-blink", + "value": "opacity 0.3 at 50%, 1s steps(2) infinite", + "purpose": "Active stage plate pip." + }, + { + "name": "state", + "value": "0.12s to 0.3s", + "purpose": "Ticks, button fills, plate changes, grayscale." + }, + { + "name": "reduced-motion", + "value": "all animation and transition off", + "purpose": "prefers-reduced-motion: reduce." + } + ], + "breakpoints": [ + { + "name": "stack", + "value": "1000px (container)", + "purpose": "Columns stack; the userscript panel form." + }, + { + "name": "timeline-single", + "value": "760px (container)", + "purpose": "Timeline rail moves to a left gutter." + }, + { + "name": "default-row", + "value": "700px (container)", + "purpose": "Main-cover row stacks." + }, + { + "name": "wide-span", + "value": "420px (container)", + "purpose": "Wide books stop spanning two slots." + } + ] + }, + "components": [ + { + "name": "Outline Button", + "kind": "button", + "refersTo": "button-outline", + "description": "Default desk action (Rehost selected, Copy all selected, Preview changes).", + "html": "
", + "css": ":host,.ds-scope{--mb-page:#efe9df;--mb-slip:#f8f4ec;--mb-ink:#1d1b22;--mb-ink-2:#55505a;--mb-obi:#d6362f;--mb-obi-deep:#8f1d18;--mb-obi-ink:#fffaf6;--mb-teal:#2f6f6a;--mb-kraft:#b59d78;--mb-rail:#7d6847;--mb-line:rgba(29,27,34,.2);--mb-frame:rgba(29,27,34,.35);--mb-track:rgba(29,27,34,.12);--mb-shadow:rgba(29,20,10,.5);--mb-sans:ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,\"Noto Sans\",\"Helvetica Neue\",Arial,sans-serif;font:14px/1.5 var(--mb-sans);color:var(--mb-ink);} .ds-btn{display:block;width:100%;padding:8px 12px;border:1.5px solid var(--mb-ink);border-radius:0;background:transparent;color:var(--mb-ink);font:700 13px var(--mb-sans);cursor:pointer;transition:background-color .15s,color .15s;} .ds-btn:hover{background:var(--mb-ink);color:var(--mb-page);} .ds-btn:focus-visible{outline:2px solid var(--mb-teal);outline-offset:2px;}" + }, + { + "name": "Stamp Button", + "kind": "button", + "refersTo": "button-stamp", + "description": "The red stamp: Find covers, and the final file-for-review action only.", + "html": "
", + "css": ":host,.ds-scope{--mb-page:#efe9df;--mb-slip:#f8f4ec;--mb-ink:#1d1b22;--mb-ink-2:#55505a;--mb-obi:#d6362f;--mb-obi-deep:#8f1d18;--mb-obi-ink:#fffaf6;--mb-teal:#2f6f6a;--mb-kraft:#b59d78;--mb-rail:#7d6847;--mb-line:rgba(29,27,34,.2);--mb-frame:rgba(29,27,34,.35);--mb-track:rgba(29,27,34,.12);--mb-shadow:rgba(29,20,10,.5);--mb-sans:ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,\"Noto Sans\",\"Helvetica Neue\",Arial,sans-serif;font:14px/1.5 var(--mb-sans);color:var(--mb-ink);} .ds-stamp{display:block;width:100%;padding:10px 12px;border:1.5px solid var(--mb-obi);border-radius:0;background:var(--mb-obi);color:var(--mb-obi-ink);font:800 12.5px var(--mb-sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background-color .15s;} .ds-stamp:hover{background:var(--mb-obi-deep);border-color:var(--mb-obi-deep);} .ds-stamp:focus-visible{outline:2px solid var(--mb-teal);outline-offset:2px;}" + }, + { + "name": "Slip Field", + "kind": "input", + "refersTo": "slip-field", + "description": "A paper slip holding a tracked label, a dotted-underline input and an optional hint.", + "html": "
", + "css": ":host,.ds-scope{--mb-page:#efe9df;--mb-slip:#f8f4ec;--mb-ink:#1d1b22;--mb-ink-2:#55505a;--mb-obi:#d6362f;--mb-obi-deep:#8f1d18;--mb-obi-ink:#fffaf6;--mb-teal:#2f6f6a;--mb-kraft:#b59d78;--mb-rail:#7d6847;--mb-line:rgba(29,27,34,.2);--mb-frame:rgba(29,27,34,.35);--mb-track:rgba(29,27,34,.12);--mb-shadow:rgba(29,20,10,.5);--mb-sans:ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,\"Noto Sans\",\"Helvetica Neue\",Arial,sans-serif;font:14px/1.5 var(--mb-sans);color:var(--mb-ink);} .ds-slip{display:grid;gap:3px;padding:7px 10px 8px;background:var(--mb-slip);border:1px solid var(--mb-line);} .ds-slip:focus-within{border-color:var(--mb-ink);} .ds-slip-label{font:700 10px var(--mb-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mb-ink-2);} .ds-slip-hint{font-size:11.5px;color:var(--mb-ink-2);} .ds-slip-input{width:100%;padding:2px 0;border:0;border-bottom:1px dotted var(--mb-ink-2);background:transparent;color:var(--mb-ink);font:14px var(--mb-sans);} .ds-slip-input:focus{outline:none;border-bottom:1.5px solid var(--mb-ink);}" + }, + { + "name": "Editable Select", + "kind": "input", + "refersTo": "select", + "description": "Every select is visibly editable: boxed, 2px ink bottom edge, drawn chevron.", + "html": "
", + "css": ":host,.ds-scope{--mb-page:#efe9df;--mb-slip:#f8f4ec;--mb-ink:#1d1b22;--mb-ink-2:#55505a;--mb-obi:#d6362f;--mb-obi-deep:#8f1d18;--mb-obi-ink:#fffaf6;--mb-teal:#2f6f6a;--mb-kraft:#b59d78;--mb-rail:#7d6847;--mb-line:rgba(29,27,34,.2);--mb-frame:rgba(29,27,34,.35);--mb-track:rgba(29,27,34,.12);--mb-shadow:rgba(29,20,10,.5);--mb-sans:ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,\"Noto Sans\",\"Helvetica Neue\",Arial,sans-serif;font:14px/1.5 var(--mb-sans);color:var(--mb-ink);} .ds-select{appearance:none;-webkit-appearance:none;padding:4px 26px 4px 9px;border:1px solid var(--mb-frame);border-bottom:2px solid var(--mb-ink);border-radius:0;background:var(--mb-slip) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231d1b22' stroke-width='1.6'/%3E%3C/svg%3E\") no-repeat right 9px center;color:var(--mb-ink);font:600 13px var(--mb-sans);cursor:pointer;} .ds-select:hover{border-color:var(--mb-ink);background-color:var(--mb-page);} .ds-select:focus-visible{outline:2px solid var(--mb-teal);outline-offset:2px;}" + }, + { + "name": "View Switch", + "kind": "nav", + "refersTo": "view-switch", + "description": "Shelf | Timeline segmented pair in one ink border.", + "html": "
", + "css": ":host,.ds-scope{--mb-page:#efe9df;--mb-slip:#f8f4ec;--mb-ink:#1d1b22;--mb-ink-2:#55505a;--mb-obi:#d6362f;--mb-obi-deep:#8f1d18;--mb-obi-ink:#fffaf6;--mb-teal:#2f6f6a;--mb-kraft:#b59d78;--mb-rail:#7d6847;--mb-line:rgba(29,27,34,.2);--mb-frame:rgba(29,27,34,.35);--mb-track:rgba(29,27,34,.12);--mb-shadow:rgba(29,20,10,.5);--mb-sans:ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,\"Noto Sans\",\"Helvetica Neue\",Arial,sans-serif;font:14px/1.5 var(--mb-sans);color:var(--mb-ink);} .ds-views{display:inline-flex;border:1.5px solid var(--mb-ink);} .ds-view{border:0;border-radius:0;background:transparent;color:var(--mb-ink);padding:4px 12px;font:700 12.5px var(--mb-sans);cursor:pointer;} .ds-view:hover{text-decoration:underline;} .ds-view[aria-pressed=\"true\"]{background:var(--mb-ink);color:var(--mb-page);} .ds-view:focus-visible{outline:2px solid var(--mb-teal);outline-offset:2px;}" + }, + { + "name": "Stage Plates", + "kind": "custom", + "refersTo": "stage-plate", + "description": "Run stages that change in place: pending, done (teal pip), active (inverted, blinking red pip), failed (red).", + "html": "
  1. MangaBaka#9999
  2. Archive4 / 12
  3. Images
  4. Compare
", + "css": ":host,.ds-scope{--mb-page:#efe9df;--mb-slip:#f8f4ec;--mb-ink:#1d1b22;--mb-ink-2:#55505a;--mb-obi:#d6362f;--mb-obi-deep:#8f1d18;--mb-obi-ink:#fffaf6;--mb-teal:#2f6f6a;--mb-kraft:#b59d78;--mb-rail:#7d6847;--mb-line:rgba(29,27,34,.2);--mb-frame:rgba(29,27,34,.35);--mb-track:rgba(29,27,34,.12);--mb-shadow:rgba(29,20,10,.5);--mb-sans:ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,\"Noto Sans\",\"Helvetica Neue\",Arial,sans-serif;font:14px/1.5 var(--mb-sans);color:var(--mb-ink);} .ds-plates{list-style:none;margin:0;padding:0;display:grid;} .ds-plates li{display:flex;align-items:center;gap:8px;margin-top:-1px;padding:5px 10px;border:1px solid var(--mb-line);font:700 10.5px var(--mb-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mb-ink-2);transition:background-color .3s,color .3s;} .ds-plates li span{flex:1;} .ds-plates li em{font:500 11.5px var(--mb-sans);font-style:normal;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;} .ds-plates li::before{content:\"\";width:7px;height:7px;border:1px solid currentColor;flex:none;} .ds-plates li[data-state=\"done\"]{color:var(--mb-ink);} .ds-plates li[data-state=\"done\"]::before{background:var(--mb-teal);border-color:var(--mb-teal);} .ds-plates li[data-state=\"active\"]{background:var(--mb-ink);color:var(--mb-page);} .ds-plates li[data-state=\"active\"]::before{background:var(--mb-obi);border-color:var(--mb-obi);animation:ds-blink 1s steps(2) infinite;} .ds-plates li[data-state=\"failed\"]{background:var(--mb-obi);color:var(--mb-obi-ink);} @keyframes ds-blink{50%{opacity:.3;}} @media (prefers-reduced-motion:reduce){.ds-plates li::before{animation:none!important;}}" + }, + { + "name": "Host List", + "kind": "custom", + "refersTo": "host-option", + "description": "Rehost targets as a ruled table of radio rows; the chosen row lifts to slip paper.", + "html": "
", + "css": ":host,.ds-scope{--mb-page:#efe9df;--mb-slip:#f8f4ec;--mb-ink:#1d1b22;--mb-ink-2:#55505a;--mb-obi:#d6362f;--mb-obi-deep:#8f1d18;--mb-obi-ink:#fffaf6;--mb-teal:#2f6f6a;--mb-kraft:#b59d78;--mb-rail:#7d6847;--mb-line:rgba(29,27,34,.2);--mb-frame:rgba(29,27,34,.35);--mb-track:rgba(29,27,34,.12);--mb-shadow:rgba(29,20,10,.5);--mb-sans:ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,\"Noto Sans\",\"Helvetica Neue\",Arial,sans-serif;font:14px/1.5 var(--mb-sans);color:var(--mb-ink);} .ds-hosts{margin:0;padding:0;border:0;display:grid;} .ds-hosts label{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline;padding:6px 8px;margin-top:-1px;border:1px solid var(--mb-line);font-size:13px;cursor:pointer;color:var(--mb-ink-2);} .ds-hosts label:hover{color:var(--mb-ink);} .ds-hosts label:has(input:checked){background:var(--mb-slip);color:var(--mb-ink);font-weight:600;} .ds-hosts span,.ds-hosts small{grid-column:2;} .ds-hosts small{font-weight:400;font-size:11.5px;color:var(--mb-ink-2);} .ds-hosts input{appearance:none;-webkit-appearance:none;width:15px;height:15px;margin:2px 0 0;border:1.5px solid var(--mb-ink);border-radius:50%;background:var(--mb-slip);display:inline-grid;place-content:center;} .ds-hosts input::before{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--mb-ink);transform:scale(0);transition:transform .12s;} .ds-hosts input:checked::before{transform:scale(1);} .ds-hosts input:focus-visible{outline:2px solid var(--mb-teal);outline-offset:2px;}" + }, + { + "name": "Book with Obi Band", + "kind": "card", + "refersTo": "obi-band", + "description": "Signature: a framed cover standing on a kraft rail, with an include tick and an obi band printing its evidence. Add .is-main for the red main-cover band, .is-off for an unselected book.", + "html": "

Poster

510×510 · 20 KB · seen 2015-03

Main cover

480×623 · on the page now

", + "css": ":host,.ds-scope{--mb-page:#efe9df;--mb-slip:#f8f4ec;--mb-ink:#1d1b22;--mb-ink-2:#55505a;--mb-obi:#d6362f;--mb-obi-deep:#8f1d18;--mb-obi-ink:#fffaf6;--mb-teal:#2f6f6a;--mb-kraft:#b59d78;--mb-rail:#7d6847;--mb-line:rgba(29,27,34,.2);--mb-frame:rgba(29,27,34,.35);--mb-track:rgba(29,27,34,.12);--mb-shadow:rgba(29,20,10,.5);--mb-sans:ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,\"Noto Sans\",\"Helvetica Neue\",Arial,sans-serif;font:14px/1.5 var(--mb-sans);color:var(--mb-ink);} .ds-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-items:end;column-gap:0;row-gap:32px;} .ds-book{display:flex;flex-direction:column;justify-content:flex-end;padding:0 10px;border-bottom:10px solid var(--mb-kraft);box-shadow:0 2px 0 var(--mb-rail);} .ds-jacket{position:relative;display:block;cursor:pointer;} .ds-jacket img{display:block;width:100%;height:auto;max-height:250px;object-fit:contain;object-position:bottom;outline:1px solid var(--mb-frame);outline-offset:-1px;box-shadow:0 8px 14px -8px var(--mb-shadow);transition:filter .25s,opacity .25s,transform .3s cubic-bezier(.16,1,.3,1);} .ds-tick{position:absolute;top:0;left:0;margin:0;width:22px;height:22px;appearance:none;-webkit-appearance:none;background:var(--mb-slip);border:1.5px solid var(--mb-ink);display:grid;place-items:center;cursor:pointer;} .ds-tick::after{content:\"\";width:10px;height:10px;background:var(--mb-ink);transform:scale(0);transition:transform .15s;} .ds-tick:checked::after{transform:scale(1);} .ds-tick:focus-visible{outline:2px solid var(--mb-teal);outline-offset:2px;} .ds-obi{position:relative;margin-top:-14px;display:grid;gap:4px;padding:6px 8px 8px;background:var(--mb-slip);border:1px solid var(--mb-line);border-top:3px solid var(--mb-ink);font-size:11.5px;} .ds-obi p{margin:0;} .ds-obi-role{font:800 10.5px var(--mb-sans);letter-spacing:.12em;text-transform:uppercase;} .ds-obi-facts{color:var(--mb-ink-2);font-variant-numeric:tabular-nums;} .ds-seen{position:relative;height:5px;background:var(--mb-track);} .ds-seen i{position:absolute;top:0;bottom:0;background:var(--mb-ink);} .ds-book.is-main .ds-obi{background:var(--mb-obi);color:var(--mb-obi-ink);border-color:var(--mb-obi);border-top-color:var(--mb-obi-deep);} .ds-book.is-main .ds-obi-facts{color:var(--mb-obi-ink);} .ds-book.is-main .ds-seen{background:rgba(255,255,255,.3);} .ds-book.is-main .ds-seen i{background:var(--mb-obi-ink);} .ds-book.is-off .ds-jacket img{filter:grayscale(1) contrast(.85);opacity:.5;transform:translateY(8px);} .ds-jacket:hover img{opacity:.92;}" + } + ], + "narrative": { + "northStar": "The Obi Shelf", + "overview": "Every cover a series has ever worn stands on one bookshop shelf, each wrapped in an obi band that prints its evidence: role, size, where and when it was seen, how long the archive saw it. The shelf sits inside a working console: a sticky left desk where links are written on paper slips and the run is stamped off, a middle shelf (or, as a second view, an annotated timeline of years), and a sticky right desk for rehosting and filing. The materials are book-jacket paper, sumi ink, obi red, kraft board, and one deep teal for \"done\".\n\nDensity is that of a well-kept tool, not a dashboard: small tracked uppercase labels, printed hairlines, square corners, tabular numerals. Depth comes from the books themselves, which cast a soft shadow onto their rail; nothing else floats except the userscript panel over mangabaka.org. The system refuses the category default (a white card grid of rounded tiles with checkboxes and select boxes) and anything corporate or SaaS-flavoured.\n\nThe whole world is scoped so it can live inside a shadow root on mangabaka.org: every rule hangs off the `mbseed-` scope, there are no webfonts and no external assets, and drawn details (the select chevron) are inline SVG data. Desktop and the userscript panel come first; the narrow, stacked layout exists for the panel, and phone layouts are deferred.", + "keyCharacteristics": [ + "Warm paper (light) and warm umber (dark) grounds; never pure black or white.", + "Covers stand on kraft rails, each with an obi band carrying its evidence.", + "Obi red marks the main cover and the two stamps; teal marks done, rehosted, added, and focus.", + "Square corners and printed hairlines; the radio is the only round form.", + "Unselected covers go grayscale and lean back.", + "Two views of one set: Shelf and Timeline." + ], + "rules": [ + { + "name": "The Warm Ground Rule", + "body": "No ground is ever pure black or white. Every cover carries a 1px inset frame in `cover-frame`, so black- or white-ground art still shows its edge on either scheme.", + "section": "colors" + }, + { + "name": "The Red Is a Band Rule", + "body": "Obi red is a fill: the main cover's band, the stamps, failure. It appears once per desk as a stamp and once on the shelf as the main cover. Small type in red on paper or umber does not reach 4.5:1 at the current values, so status and error text should not rely on red alone.", + "section": "colors" + }, + { + "name": "The Teal Means Done Rule", + "body": "Teal is the only \"finished/safe\" signal: done plates, progress, rehosted, added, and keyboard focus. Do not use it decoratively.", + "section": "colors" + }, + { + "name": "The Printed Label Rule", + "body": "Uppercase tracking is reserved for things printed on an object: slip labels, band roles, plate names, desk section caps, stamps. Running text and headings stay in sentence case.", + "section": "typography" + }, + { + "name": "The Tabular Facts Rule", + "body": "Every count, size, date and year uses tabular numerals so columns of facts align on the bands and plates.", + "section": "typography" + }, + { + "name": "The Shelf Shadow Rule", + "body": "Only books and the floating panel cast shadows. Cards, buttons, bands, and desks never do.", + "section": "elevation" + } + ], + "dos": [ + "**Do** frame every cover with the 1px inset `cover-frame` so dark and light art keeps its edge on both grounds.", + "**Do** keep every select boxed with a 2px ink bottom edge and a drawn chevron; on a band, keep the underline and chevron.", + "**Do** label inputs and data source-neutrally (\"Source series link\", \"Series page\"); the source's name comes from data, never from the chrome.", + "**Do** scope every rule under the `mbseed-` scope and use only system font stacks and inline assets, so the same CSS runs in the userscript's shadow root.", + "**Do** reserve obi red for the main cover's band, the stamps, and failure; use teal for done, rehosted, added, and focus.", + "**Do** turn unselected covers grayscale and lower them rather than hiding them.", + "**Do** design for the desktop console and the stacked userscript panel first." + ], + "donts": [ + "**Don't** use pure black or pure white as a ground in either scheme.", + "**Don't** build a white card grid of rounded, shadowed tiles, or anything that reads as corporate or SaaS.", + "**Don't** round corners; the radio is the only round form.", + "**Don't** add shadows beyond the book cast, the rail lip, and the floating userscript panel.", + "**Don't** name WEBTOON (or any one source) in chrome labels or headings; a source name appears only as data or as an honest note of what is supported today.", + "**Don't** load webfonts, icon fonts, or external scripts.", + "**Don't** set small text in band red (`--mb-obi`): it is 3.9:1 on paper. Small red text (year keys, errors, removed lines, link hover) uses `--mb-obi-text` (#a3261f light, #f2867b dark; 5.5–6.1:1), and never as the only signal of an error or state." + ] + } +} \ No newline at end of file diff --git a/.impeccable/surfaces/src-web-template-ts.md b/.impeccable/surfaces/src-web-template-ts.md new file mode 100644 index 0000000..9c55eb9 --- /dev/null +++ b/.impeccable/surfaces/src-web-template-ts.md @@ -0,0 +1,20 @@ +--- +version: 1 +slug: "src-web-template-ts" +primary_target: "src/web/template.ts" +related_targets: ["src/web/styles.css","src/web/render.ts"] +--- + +# Surface brief — the seeder page and userscript panel + +Scope: `src/web/` (template.ts, styles.css, render.ts) mounted by the page and, in a shadow root, by the userscript panel on mangabaka.org. Mode: Operate. +Audience: volunteer MangaBaka catalogue editors, at a desk (desktop first; the panel is equally important; mobile later). Job: turn two links into a reviewed set of covers, rehost them, then paste them into MangaBaka or file an edit request. +Constraints: keep every `id` in template.ts (test/template.test.ts); all CSS scoped under `.mbseed-app` / `.mbseed-panel` so it works in a shadow root; no external fonts or scripts; light theme first, dark via prefers-color-scheme; must not feel corporate/SaaS (user, 2026-10-14). + +## Direction contract +THESIS: Every cover the series ever wore stands on one shelf, each wrapped in an obi band that carries its evidence. Refuses the category default: a white card grid with checkboxes and select boxes. +OWN-WORLD: Console layout from Graphite Console; shelf and colours from the Obi Shelf; timeline view from Annotated Edition (user's choice, 2026-10-15). Book-jacket paper ground (#efe9df), sumi ink text (#1d1b22), obi red (#d6362f) for the main cover and the primary action, deep teal (#2f6f6a) for rehosted/done state, kraft (#c9b79c) for the shelf rail and inactive bands. Obi bands are full-width paper strips across the lower third of each cover with a printed label face; the shelf is a heavy rail line under each row. Square corners, printed hairlines, no shadows except the one cast by a book on its shelf. Unselected covers turn grayscale and lean back (desaturated, lowered). Dark mode is warm umber (#2a2520), never pure black or white, and every cover has a hairline frame, so black- or white-ground art stays distinguishable (user, 2026-10-15). Labels never assume WEBTOON is the only source. +STORY: The editor pastes two links on the "desk" strip, watches the stage plates flip as the run digs through the archive, sees every cover shelved in time order with its dates, unticks landing art, rehosts, and copies or files. +FIRST VIEWPORT: Three columns (approved round-2 mockup, samples/mockups/6-shelf-console.html, 2026-10-15). Left sticky panel: "MangaBaka series link" and "Source series link" slips, history and rating as visibly editable selects (box + chevron), the red "Find covers" stamp, five stage plates with counts, notes. Middle: series title, Shelf | Timeline switch, main-cover toggle, then the shelf (books on kraft rails, obi bands) or the timeline (newest first round a year rail). Right sticky panel: rehost hosts, Copy all selected, then the token block with the red "File" stamp isolated at the bottom. Under ~1000px the columns stack (userscript panel). +FORM: Tankōbon shelf with obi bands; my rank 4 of 7; seed key c13b5313. Raises: fixed furniture per cover and grayscale when unselected (character goods); seen-range bar to scale on the obi (labanotation); whole-book reflow on a visible rail grid (Crouwel); stage plates change in place (split-flap). +FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, DESIGN.md, and every shipping raster carrying its provenance diff --git a/DESIGN.md b/DESIGN.md index a9364e8..de6df90 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -1,7 +1,316 @@ -# Design +--- +name: MangaBaka Seeder +description: Every cover a series has worn, standing on one shelf in a three-column console. +colors: + paper-page: "#efe9df" + paper-panel: "#e6dfd2" + paper-slip: "#f8f4ec" + sumi-ink: "#1d1b22" + sumi-ink-muted: "#55505a" + obi-red: "#d6362f" + obi-red-deep: "#8f1d18" + obi-ink: "#fffaf6" + obi-red-text: "#a3261f" + rehost-teal: "#2f6f6a" + kraft-rail: "#b59d78" + rail-lip: "#7d6847" + hairline: "rgba(29, 27, 34, 0.2)" + cover-frame: "rgba(29, 27, 34, 0.35)" + track: "rgba(29, 27, 34, 0.12)" + cast-shadow: "rgba(29, 20, 10, 0.5)" + umber-page: "#2a2520" + umber-panel: "#332d27" + umber-slip: "#3b342d" + umber-ink: "#ece4d6" + umber-ink-muted: "#bdb2a2" + umber-obi-red: "#c42f28" + umber-obi-red-deep: "#8e1f1a" + umber-obi-red-text: "#f2867b" + umber-teal: "#6db3a9" + umber-kraft-rail: "#6e5a3f" + umber-rail-lip: "#4a3c2a" + umber-hairline: "rgba(236, 228, 214, 0.16)" + umber-cover-frame: "rgba(236, 228, 214, 0.35)" + umber-track: "rgba(236, 228, 214, 0.14)" + umber-cast-shadow: "rgba(0, 0, 0, 0.6)" +typography: + display: + fontFamily: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: "clamp(24px, 3.2cqi, 38px)" + fontWeight: 800 + lineHeight: 1.1 + letterSpacing: "-0.025em" + headline: + fontFamily: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: "clamp(22px, 3cqi, 30px)" + fontWeight: 800 + letterSpacing: "-0.02em" + title: + fontFamily: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: "17px" + fontWeight: 800 + letterSpacing: "-0.01em" + body: + fontFamily: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: "14px" + fontWeight: 400 + lineHeight: 1.5 + body-small: + fontFamily: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: "13px" + fontWeight: 400 + lineHeight: 1.5 + band: + fontFamily: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: "11.5px" + fontWeight: 400 + fontFeature: "\"tnum\"" + label: + fontFamily: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: "10.5px" + fontWeight: 700 + lineHeight: 1.2 + letterSpacing: "0.14em" + stamp: + fontFamily: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: "12.5px" + fontWeight: 800 + letterSpacing: "0.14em" + mono: + fontFamily: "ui-monospace, \"SFMono-Regular\", Menlo, Consolas, \"Liberation Mono\", monospace" + fontSize: "11.5px" + lineHeight: 1.45 +rounded: + none: "0" + radio: "50%" +spacing: + xs: "4px" + sm: "8px" + md: "12px" + lg: "18px" + xl: "26px" + shelf-row: "32px" +components: + button-outline: + backgroundColor: "transparent" + textColor: "{colors.sumi-ink}" + typography: "{typography.body-small}" + rounded: "{rounded.none}" + padding: "8px 12px" + width: "100%" + button-outline-hover: + backgroundColor: "{colors.sumi-ink}" + textColor: "{colors.paper-page}" + button-stamp: + backgroundColor: "{colors.obi-red}" + textColor: "{colors.obi-ink}" + typography: "{typography.stamp}" + rounded: "{rounded.none}" + padding: "10px 12px" + width: "100%" + button-stamp-hover: + backgroundColor: "{colors.obi-red-deep}" + textColor: "{colors.obi-ink}" + button-quiet: + backgroundColor: "transparent" + textColor: "{colors.sumi-ink}" + padding: "4px" + slip-field: + backgroundColor: "{colors.paper-slip}" + textColor: "{colors.sumi-ink}" + typography: "{typography.body}" + rounded: "{rounded.none}" + padding: "7px 10px 8px" + select: + backgroundColor: "{colors.paper-slip}" + textColor: "{colors.sumi-ink}" + typography: "{typography.body-small}" + rounded: "{rounded.none}" + padding: "4px 26px 4px 9px" + select-hover: + backgroundColor: "{colors.paper-page}" + view-switch: + backgroundColor: "transparent" + textColor: "{colors.sumi-ink}" + padding: "4px 12px" + view-switch-active: + backgroundColor: "{colors.sumi-ink}" + textColor: "{colors.paper-page}" + stage-plate: + backgroundColor: "transparent" + textColor: "{colors.sumi-ink-muted}" + typography: "{typography.label}" + padding: "5px 10px" + stage-plate-active: + backgroundColor: "{colors.sumi-ink}" + textColor: "{colors.paper-page}" + stage-plate-failed: + backgroundColor: "{colors.obi-red}" + textColor: "{colors.obi-ink}" + obi-band: + backgroundColor: "{colors.paper-slip}" + textColor: "{colors.sumi-ink}" + typography: "{typography.band}" + rounded: "{rounded.none}" + padding: "6px 8px 8px" + obi-band-main: + backgroundColor: "{colors.obi-red}" + textColor: "{colors.obi-ink}" + host-option: + backgroundColor: "transparent" + textColor: "{colors.sumi-ink-muted}" + typography: "{typography.body-small}" + padding: "6px 8px" + host-option-selected: + backgroundColor: "{colors.paper-slip}" + textColor: "{colors.sumi-ink}" +--- -No UI exists yet, so there is no design system to record. +# Design System: MangaBaka Seeder -TODO(maintainer): establish the visual direction with impeccable when building `src/web/` (the -first UI task), then record tokens, typography and components here from what ships. The -userscript panel lives inside mangabaka.org's pages and should sit comfortably next to them. +## Overview + +**Creative North Star: "The Obi Shelf"** + +Every cover a series has ever worn stands on one bookshop shelf, each wrapped in an obi band that prints its evidence: role, size, where and when it was seen, how long the archive saw it. The shelf sits inside a working console: a sticky left desk where links are written on paper slips and the run is stamped off, a middle shelf (or, as a second view, an annotated timeline of years), and a sticky right desk for rehosting and filing. The materials are book-jacket paper, sumi ink, obi red, kraft board, and one deep teal for "done". + +Density is that of a well-kept tool, not a dashboard: small tracked uppercase labels, printed hairlines, square corners, tabular numerals. Depth comes from the books themselves, which cast a soft shadow onto their rail; nothing else floats except the userscript panel over mangabaka.org. The system refuses the category default (a white card grid of rounded tiles with checkboxes and select boxes) and anything corporate or SaaS-flavoured. + +The whole world is scoped so it can live inside a shadow root on mangabaka.org: every rule hangs off the `mbseed-` scope, there are no webfonts and no external assets, and drawn details (the select chevron) are inline SVG data. Desktop and the userscript panel come first; the narrow, stacked layout exists for the panel, and phone layouts are deferred. + +**Key Characteristics:** +- Warm paper (light) and warm umber (dark) grounds; never pure black or white. +- Covers stand on kraft rails, each with an obi band carrying its evidence. +- Obi red marks the main cover and the two stamps; teal marks done, rehosted, added, and focus. +- Square corners and printed hairlines; the radio is the only round form. +- Unselected covers go grayscale and lean back. +- Two views of one set: Shelf and Timeline. + +## Colors + +A bookshop palette: paper and umber grounds, sumi ink, one red band, one teal for completion, kraft for the furniture. Each light token has a dark (umber) counterpart under `prefers-color-scheme: dark`; `obi-ink` is shared by both schemes. + +### Primary +- **Obi Red** (`obi-red`; dark `umber-obi-red`): the band of the main cover, the stamp buttons ("Find covers", "Rehost and file for review"), a failed stage plate, the active plate's blinking pip, the rule above notices, and the main-cover checkbox. Its depth companion **Obi Red Deep** (`obi-red-deep`) is the stamp's hover and the main band's top rule. **Obi Ink** (`obi-ink`) is the only text colour on red. + +### Secondary +- **Rehost Teal** (`rehost-teal`; dark `umber-teal`): completion and safety. Done-stage pips, the progress fill, the "Rehosted" mark on a band, added lines in the change preview, and the focus ring. + +### Tertiary +- **Kraft Rail** (`kraft-rail`; dark `umber-kraft-rail`): the 10px shelf rail under every book, the note bullets, the side-panel scrollbar. **Rail Lip** (`rail-lip`) is the darker 2px edge under the rail. + +### Neutral +- **Book-Jacket Paper** (`paper-page`) / **Warm Umber** (`umber-page`): the page and the middle column. +- **Desk Paper** (`paper-panel` / `umber-panel`): the two side desks, one step darker than the page. +- **Slip Paper** (`paper-slip` / `umber-slip`): raised paper: link slips, obi bands, selects, ticks, the selected host row, text areas. +- **Sumi Ink** (`sumi-ink` / `umber-ink`): text, the 3px rules (brand underline, obi top edge), outline buttons, the active view and plate. +- **Faded Ink** (`sumi-ink-muted` / `umber-ink-muted`): labels, hints, facts on the band, inactive plates and host rows. +- **Hairline** (`hairline`), **Cover Frame** (`cover-frame`), **Track** (`track`): translucent ink for dividers and box edges, the 1px frame on every cover and select box, and the seen-range and progress tracks. + +### Named Rules +**The Warm Ground Rule.** No ground is ever pure black or white. Every cover carries a 1px inset frame in `cover-frame`, so black- or white-ground art still shows its edge on either scheme. + +**The Red Is a Band Rule.** Obi red is a fill: the main cover's band, the stamps, failure. It appears once per desk as a stamp and once on the shelf as the main cover. Small type in red on paper or umber does not reach 4.5:1 at the current values, so status and error text should not rely on red alone. + +**The Teal Means Done Rule.** Teal is the only "finished/safe" signal: done plates, progress, rehosted, added, and keyboard focus. Do not use it decoratively. + +## Typography + +**Display Font:** the system UI sans stack (no webfonts; the userscript shadow root forbids external fonts) +**Label/Mono Font:** the system monospace stack, for the paste-out text and the catbox userhash + +**Character:** One family, hierarchy carried by weight and tracking: heavy, tightly set titles (800, negative tracking) against small, widely tracked uppercase labels that read like print on a band or a stamp. + +### Hierarchy +- **Display** (800, clamp 24-38px on container width, 1.1): the series title over the review. +- **Headline** (800, clamp 22-30px): the empty-state statement; balanced wrapping. +- **Title** (800, 17px): the brand line at the top of the left desk, over a 3px ink rule. +- **Body** (400, 14px, 1.5): base text and slip inputs; empty-state paragraphs run at 15px, capped at 62ch. +- **Body Small** (13px): settings, buttons, host rows, status lines; hints step down to 12.5px. +- **Band** (11.5px, tabular numerals): obi band facts, notes, and per-cover fields. +- **Label** (700, 10.5px, 0.14em, uppercase): desk section caps, slip labels (10px, 0.12em), obi role lines (800, 0.12em), stage plates (0.1em). +- **Stamp** (800, 12.5px, 0.14em, uppercase): red stamp buttons only. + +### Named Rules +**The Printed Label Rule.** Uppercase tracking is reserved for things printed on an object: slip labels, band roles, plate names, desk section caps, stamps. Running text and headings stay in sentence case. + +**The Tabular Facts Rule.** Every count, size, date and year uses tabular numerals so columns of facts align on the bands and plates. + +## Layout + +A three-column console on a container query, not a viewport query: left desk (250-290px), the shelf (fluid), right desk (260-300px). Both desks are sticky, full-height, and scroll on their own with a thin kraft scrollbar; they are separated from the shelf by hairlines. At a container width of 1000px or less the columns stack (left desk, shelf, right desk), the desks stop sticking, and a 3px ink rule opens the right desk. This stacked form is what the userscript panel shows. + +The shelf is a dense auto-fill grid of 150px-minimum slots with no column gap, so rails run continuously across a row; rows sit 32px apart and books align to the rail at their bottom. Wide art (banners) spans two slots, one below 420px. The timeline is a centre double rail with a 64px year column, covers alternating left and right (the right side dropped 46px to stagger); at 760px or less the rail moves to a 56px left gutter and every cover stacks to its right. + +Spacing rhythm: 4 / 8 / 12 / 18 / 26 / 32px, with tight 2-6px gaps inside slips and bands. Middle column padding is 18px 26px 56px (16px when stacked); desks are 18px 16px 24px with 14px between blocks. Desktop and panel first; phone layouts are deferred. + +## Elevation & Depth + +Flat paper with exactly three shadows, each with a physical cause. Everything else separates by hairline, ground step (page, desk, slip), and 3px ink rules. + +### Shadow Vocabulary +- **Book cast** (`box-shadow: 0 8px 14px -8px var(--mb-shadow)`): under every cover image, as it stands on its rail. +- **Rail lip** (`box-shadow: 0 2px 0 var(--mb-rail)`): the edge of the kraft rail under each shelved book. It is shelf furniture, not a card shadow. +- **Floating panel** (`box-shadow: 0 18px 40px -18px var(--mb-shadow)`): the userscript panel over mangabaka.org only. + +### Named Rules +**The Shelf Shadow Rule.** Only books and the floating panel cast shadows. Cards, buttons, bands, and desks never do. + +## Shapes + +Square corners throughout (`rounded.none`): slips, bands, buttons, selects, plates, checkboxes, ticks, covers. The one exception is the radio, which is round so single choice reads differently from multiple choice (`rounded.radio`). Edges are printed: 1px hairlines for boxes, 1.5px ink for buttons and checks, 3px ink for rules that open a thing (the brand, the obi's top edge, the stacked right desk). Stacked lists (plates, host rows) overlap their borders by 1px so they print as one ruled table. Inputs are underlined, not boxed: dotted at rest, solid on focus. + +## Components + +### Buttons +Printed, square, and decisive. +- **Shape:** square, 1.5px ink border, full width of the desk. +- **Outline (default):** transparent with ink text and border; fills ink with page-coloured text on hover (0.15s). +- **Stamp:** obi red fill, obi-ink tracked uppercase; deepens to obi-red-deep on hover. Used for "Find covers" and the final "Rehost and file for review" only, the latter isolated at the bottom of the right desk below a dashed hairline. +- **Quiet:** borderless underlined text for secondary run actions (skip history, cancel). +- **Disabled:** 0.4 opacity, not-allowed cursor. + +### Inputs / Fields +- **Slip:** a slip-paper box with a hairline edge holding a tracked label, an underlined (dotted) input, and an optional hint. On focus the underline goes solid ink and the slip's edge turns ink. +- **Select:** always visibly editable: slip-paper box, cover-frame edge, a 2px ink bottom edge, and a drawn SVG chevron. Hover darkens the edge to ink and steps the fill to page. +- **Select on a band:** printed onto the obi: underline and chevron only, boxed on hover or focus. On the red main band the chevron is dropped. +- **Checkbox and radio:** custom, 15px, 1.5px ink edge on slip, filled with an ink square (radio: dot) when checked; the main-cover checkbox fills red. +- **Text area:** slip paper, hairline, mono 11.5px. + +### Navigation +- **View switch (Shelf | Timeline):** a segmented pair inside one 1.5px ink border, right-aligned in the review head; the pressed view is ink-filled with page text. + +### Stage Plates +A ruled table of five run stages that change in place like a split-flap board: tracked uppercase name, count at the right in tabular numerals, a 7px square pip. Pending is faded ink; done turns ink with a teal pip; active inverts to ink with a blinking red pip; failed fills red. A 3px teal progress line sits under the table. + +### Host List +Rehost targets as a ruled table of radio rows (name plus a one-line retention fact). The chosen row lifts to slip paper with full ink and weight 600; a warning line appears only under the chosen row. + +### Book and Obi Band (signature) +Each cover is a book: the image (max 250px tall on the shelf, 170px in the timeline, contained, framed, casting the book shadow) with a 22px square include tick in its top-left corner, and an obi band overlapping its foot by 14px. The band is slip paper with a 3px ink top edge and prints: role (tracked uppercase), facts (tabular, " · " separated), a 5px seen-range bar drawn to scale with a teal "Rehosted" mark, the role and rating selects, and an underlined moderator note. The main cover's band is obi red with obi-ink text. An unselected book goes grayscale, fades to half opacity, and drops 8px (on the shelf; it stays put in the timeline). + +### Timeline (second view) +The Annotated Edition: a centre double ink rail with year keys set in heavy tabular numerals on a page-coloured knockout, books beside it as image-plus-band pairs. + +### Motion +One authored motion: when a run finishes, books are shelved left to right (rise 14px, 0.55s, `cubic-bezier(0.16, 1, 0.3, 1)`, 28ms stagger capped at 24 books). The active plate's pip blinks in two steps. Everything else is 0.12-0.3s state transitions. `prefers-reduced-motion` removes all animation and transitions. + +## Do's and Don'ts + +### Do: +- **Do** frame every cover with the 1px inset `cover-frame` so dark and light art keeps its edge on both grounds. +- **Do** keep every select boxed with a 2px ink bottom edge and a drawn chevron; on a band, keep the underline and chevron. +- **Do** label inputs and data source-neutrally ("Source series link", "Series page"); the source's name comes from data, never from the chrome. +- **Do** scope every rule under the `mbseed-` scope and use only system font stacks and inline assets, so the same CSS runs in the userscript's shadow root. +- **Do** reserve obi red for the main cover's band, the stamps, and failure; use teal for done, rehosted, added, and focus. +- **Do** turn unselected covers grayscale and lower them rather than hiding them. +- **Do** design for the desktop console and the stacked userscript panel first. + +### Don't: +- **Don't** use pure black or pure white as a ground in either scheme. +- **Don't** build a white card grid of rounded, shadowed tiles, or anything that reads as corporate or SaaS. +- **Don't** round corners; the radio is the only round form. +- **Don't** add shadows beyond the book cast, the rail lip, and the floating userscript panel. +- **Don't** name WEBTOON (or any one source) in chrome labels or headings; a source name appears only as data or as an honest note of what is supported today. +- **Don't** load webfonts, icon fonts, or external scripts. +- **Don't** set small text in band red (`--mb-obi`): it is 3.9:1 on paper. Small red text (year keys, errors, removed lines, link hover) uses `--mb-obi-text` (#a3261f light, #f2867b dark; 5.5–6.1:1), and never as the only signal of an error or state. diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md index 0b4f746..331944f 100644 --- a/docs/ARCHITECTURE.md +++ b/docs/ARCHITECTURE.md @@ -13,7 +13,7 @@ self-hosted Bun server (primary), a userscript, and later a Bun CLI. Replace thi |---|---| | `src/core/` | Pure pipeline: sources, Wayback history, image inspection, dedupe, seed, MangaBaka client. No DOM, Bun, Node or `GM_*` APIs. | | `src/core/session.ts` | Review state shared by the page and the userscript: cards, main cover, rehosting, manual text, token flow (preview → confirm → save for review). | -| `src/web/` | Static page UI. | +| `src/web/` | Built. The page ("Obi Shelf" design, see `DESIGN.md`): `template.ts` markup shared with the userscript panel, `app.ts` wiring (`mountApp`), `render.ts` shelf and timeline views, `view-model.ts` pure helpers, `transport.ts` (direct to MangaBaka/litterbox, everything else via `/api/fetch`), `styles.css` scoped for a shadow root. | | `src/server/` | Built. `app.ts`: web-standard handler (`createApp(env)`) — static assets, `/api/config`, `/api/fetch` allowlisted proxy (redirects re-checked, 20 MB cap), `/api/upload` (store or catbox; takes a source URL, never bytes), `/covers/*`. `storage.ts` (interface, in-memory) and `storage-dir.ts` (folder, size cap, 30-day sweep). `config.ts` (env, client IP), `rate-limit.ts`, `assets-path.ts`. `bun.ts`: thin `Bun.serve` entry. Gate and Workers entry deferred. | | `src/userscript/` | Userscript on mangabaka.org; network via `GM_xmlhttpRequest`. | | `src/cli/` | Later: Bun CLI. | diff --git a/src/web/app.ts b/src/web/app.ts index fe23d43..61c869f 100644 --- a/src/web/app.ts +++ b/src/web/app.ts @@ -7,6 +7,7 @@ import { renderCards, renderPresent, renderPreview } from "./render"; import { GRANULARITY_LABELS, defaultHost, hostChoices, stageText, type ServerConfig } from "./view-model"; export const USERHASH_KEY = "mbseed.catbox-userhash"; +export const VIEW_KEY = "mbseed.view"; export interface AppOptions { root: ParentNode; @@ -41,6 +42,7 @@ export function mountApp(o: AppOptions): void { warnings: q("warnings"), review: q("review"), seriesTitle: q("series-title"), + seriesSource: q("series-source"), matureWarning: q("mature-warning"), linkWarning: q("link-warning"), linkConfirm: q("link-confirm"), @@ -65,6 +67,22 @@ export function mountApp(o: AppOptions): void { confirm: q("confirm"), submitStatus: q("submit-status"), }; + const plates = [...o.root.querySelectorAll(".mbseed-plates [data-stage]")]; + let currentStage = ""; + /** Stage plates change state in place: done, active, failed, or pending. */ + /** Each plate shows a short count once its stage has something to say (images, language, n/n…). */ + const setCount = (stage: string, text: string) => { + const em = plates.find((p) => p.dataset.stage === stage)?.querySelector("em"); + if (em) em.textContent = text; + }; + const markStage = (stage: string, outcome: "running" | "done" | "failed" | "reset" = "running") => { + currentStage = stage; + const at = plates.findIndex((p) => p.dataset.stage === stage); + plates.forEach((plate, i) => { + plate.dataset.state = + outcome === "reset" ? "" : outcome === "done" ? "done" : i < at ? "done" : i === at ? (outcome === "failed" ? "failed" : "active") : ""; + }); + }; let running: AbortController | null = null; let stopHistory: AbortController | null = null; let prepared: PreparedSubmission | null = null; @@ -89,6 +107,20 @@ export function mountApp(o: AppOptions): void { ui.userhashRemember.checked = true; } + const viewButtons = [...o.root.querySelectorAll(".mbseed-view[data-view]")]; + const showView = (view: string) => { + ui.cards.dataset.view = view === "timeline" ? "timeline" : "shelf"; + for (const b of viewButtons) b.setAttribute("aria-pressed", String(b.dataset.view === ui.cards.dataset.view)); + }; + showView(o.store.get(VIEW_KEY) ?? "shelf"); + for (const b of viewButtons) { + b.addEventListener("click", () => { + showView(b.dataset.view ?? "shelf"); + o.store.set(VIEW_KEY, ui.cards.dataset.view ?? "shelf"); + draw(); + }); + } + const hostOptions = (): HostOptions => ({ litterboxTime: ui.litterboxTime.value as LitterboxTime, catboxUserhash: ui.userhash.value.trim() || undefined, @@ -105,9 +137,10 @@ export function mountApp(o: AppOptions): void { type: "radio", name: "mbseed-host", value: c.id, checked: c.id === current, disabled: c.disabled !== null, }); const label = document.createElement("label"); - label.append(input, ` ${c.label} — ${c.lifetime}`); + label.append(input, Object.assign(document.createElement("span"), { textContent: c.label }), + Object.assign(document.createElement("small"), { textContent: c.lifetime })); const why = c.disabled ?? c.warning; - if (why) label.append(Object.assign(document.createElement("small"), { textContent: ` ${why}` })); + if (why) label.append(Object.assign(document.createElement("small"), { className: c.disabled ? "is-why" : "is-warn", textContent: why })); return label; })); } @@ -137,8 +170,9 @@ export function mountApp(o: AppOptions): void { ui.makeDefault.checked = o.session.makeDefault; ui.makeDefault.disabled = !r.suggestedDefault; ui.defaultNote.textContent = r.suggestedDefault - ? "MangaBaka has one main cover per series, not per language: this replaces the current main cover for every language." + ? "One main cover per series: this replaces it for every language." : "No current poster was found to suggest as the main cover."; + ui.rehost.textContent = `Rehost ${selected} cover${selected === 1 ? "" : "s"}`; ui.manualText.value = o.session.manualText(); const blocked = selected === 0 || (!r.linkMatches && !ui.linkConfirm.checked); ui.rehost.disabled = blocked; @@ -156,6 +190,7 @@ export function mountApp(o: AppOptions): void { ui.confirm.hidden = true; ui.previewDiff.replaceChildren(); ui.linkConfirm.checked = false; + for (const plate of plates) setCount(plate.dataset.stage ?? "", ""); status(ui.stage, "Starting…"); try { const r = await o.session.run( @@ -168,11 +203,13 @@ export function mountApp(o: AppOptions): void { signal: running.signal, stopHistory: stopHistory.signal, onStage: (stage) => { + markStage(stage); status(ui.stage, stageText(stage)); ui.progress.removeAttribute("value"); ui.skipHistory.hidden = stage !== "history"; }, onProgress: (stage, done, total) => { + setCount(stage, `${done} / ${total}`); status(ui.stage, stageText(stage, done, total)); ui.progress.max = total; ui.progress.value = done; @@ -181,17 +218,34 @@ export function mountApp(o: AppOptions): void { }, ui.ratingAll.value as ContentRating, ); + markStage("compare", "done"); + setCount("series", `#${r.seriesId}`); + setCount("source", r.series.language); + if (ui.historyOn.checked === false) setCount("history", "off"); + setCount("compare", `${r.present.length} on MangaBaka`); + const landing = r.fresh.filter((c) => c.shape === "tall").length; + if (landing) { + ui.warnings.append(Object.assign(document.createElement("li"), { + textContent: `${landing} tall image${landing === 1 ? " looks" : "s look"} like landing-page art and start${landing === 1 ? "s" : ""} unselected.`, + })); + } status(ui.stage, `Found ${r.fresh.length} new cover(s); ${r.present.length} already on MangaBaka.`); ui.progress.max = 1; ui.progress.value = 1; - ui.seriesTitle.textContent = `${r.mbSeries.title} ← ${r.source.name} “${r.series.title}” (${r.series.language})`; + ui.seriesTitle.textContent = r.mbSeries.title; + ui.seriesSource.textContent = `← ${r.source.name} “${r.series.title}” · ${r.series.language}`; ui.matureWarning.hidden = !r.series.mature; ui.formLink.href = coverFormUrl(r.seriesId); ui.review.hidden = false; draw(); } catch (err) { - if (running?.signal.aborted) status(ui.stage, "Cancelled."); - else status(ui.stage, errorText(err), true); + if (running?.signal.aborted) { + markStage(currentStage, "reset"); + status(ui.stage, "Cancelled."); + } else { + markStage(currentStage, "failed"); + status(ui.stage, errorText(err), true); + } } finally { running = null; stopHistory = null; diff --git a/src/web/index.html b/src/web/index.html index 0e9e124..f406361 100644 --- a/src/web/index.html +++ b/src/web/index.html @@ -3,16 +3,12 @@ + MangaBaka Seeder - -
-

MangaBaka Seeder

-

Find every cover a WEBTOON series has used and turn them into a MangaBaka cover edit request.

-
- -
+ +
diff --git a/src/web/render.ts b/src/web/render.ts index d9fc0f6..8f62cf8 100644 --- a/src/web/render.ts +++ b/src/web/render.ts @@ -1,10 +1,15 @@ import type { ExistingImage } from "../core/covers"; import type { PreviewResult } from "../core/mangabaka/types"; -import { CONTENT_RATINGS, type ImageType, type InspectedCover } from "../core/model"; -import type { Session } from "../core/session"; -import { cardFacts } from "./view-model"; +import { CONTENT_RATINGS, type CoverRole, type ImageType, type InspectedCover } from "../core/model"; +import type { ReviewCard, Session } from "../core/session"; +import { cardFacts, seenBar, seenSpan, timelineGroups, type Span } from "./view-model"; const IMAGE_TYPES: readonly ImageType[] = ["volume", "volume_back", "chapter", "season", "banner", "audiobook", "other"]; +const ROLE: Readonly> = { + poster: "Poster", square: "Square thumbnail", banner: "Banner", foreground: "Foreground art", other: "Image", +}; +/** Results already shelved once: the shelving motion plays on a new run, not on every edit. */ +const shelved = new WeakSet(); function el( tag: K, @@ -17,48 +22,86 @@ function el( } function picker(values: readonly T[], value: T, label: string, onChange: (v: T) => void): HTMLSelectElement { - const select = el("select", { ariaLabel: label }, ...values.map((v) => new Option(v, v, false, v === value))); + const select = el("select", { className: "mbseed-select is-small", ariaLabel: label }, ...values.map((v) => new Option(v, v, false, v === value))); select.addEventListener("change", () => onChange(select.value as T)); return select; } -/** One card per new cover: the evidence, and the fields the user may change. */ +/** One book per new cover: the jacket (click to include) and its obi band with the evidence and fields. */ +function book(card: ReviewCard, index: number, session: Session, onEdit: () => void, span: Span, mainSha: string | null): HTMLElement { + const c = card.cover; + const edit = (patch: Parameters[1]) => { + session.update(c.sha256, patch); + onEdit(); + }; + const isMain = c.sha256 === mainSha && card.selected; + const include = el("input", { type: "checkbox", className: "mbseed-tick", checked: card.selected, ariaLabel: `Include this ${ROLE[c.candidate.role].toLowerCase()}` }); + include.addEventListener("change", () => edit({ selected: include.checked })); + const note = el("input", { type: "text", className: "mbseed-note", value: card.note, ariaLabel: "Note for the moderator" }); + note.addEventListener("change", () => edit({ note: note.value })); + const bar = seenBar(c, span); + const run = el("i"); + run.style.left = `${bar.left}%`; + run.style.width = `${bar.width}%`; + const seen = el("div", { className: "mbseed-seen" }, run); + seen.setAttribute("aria-hidden", "true"); + + const classes = ["mbseed-book", `is-${c.shape}`, card.selected ? "is-selected" : "is-off", isMain && "is-main"].filter(Boolean).join(" "); + const item = el("article", { className: classes }, + el("label", { className: "mbseed-jacket" }, + el("img", { src: card.hostedUrl ?? c.fetchedFrom, alt: card.note, loading: "lazy", decoding: "async", referrerPolicy: "no-referrer" }), + include), + el("div", { className: "mbseed-obi" }, + el("p", { className: "mbseed-obi-role", textContent: isMain ? "Main cover" : ROLE[c.candidate.role] }), + el("p", { className: "mbseed-obi-facts", textContent: cardFacts(card).join(" · ") }), + el("div", { className: "mbseed-obi-seen-row" }, + seen, + card.hostedUrl + ? el("a", { className: "mbseed-obi-hosted", href: card.hostedUrl, target: "_blank", rel: "noopener", title: `Rehosted copy: ${card.hostedUrl}`, textContent: "Rehosted" }) + : ""), + el("div", { className: "mbseed-obi-fields" }, + picker(IMAGE_TYPES, card.type, "Type", (type) => edit({ type })), + picker(CONTENT_RATINGS, card.contentRating, "Content rating", (contentRating) => edit({ contentRating }))), + note, + card.error ? el("p", { className: "mbseed-obi-error", role: "alert", textContent: card.error }) : "")); + item.style.setProperty("--i", String(index)); + return item; +} + +/** The covers as a shelf (default) or a timeline, chosen by `container.dataset.view`. */ export function renderCards(container: HTMLElement, session: Session, onEdit: () => void): void { - const suggested = session.result?.suggestedDefault?.sha256; - container.replaceChildren( - ...session.cards.map((card) => { - const sha = card.cover.sha256; - const edit = (patch: Parameters[1]) => { - session.update(sha, patch); - onEdit(); - }; - const include = el("input", { type: "checkbox", checked: card.selected, ariaLabel: "Include this cover" }); - include.addEventListener("change", () => edit({ selected: include.checked })); - const note = el("input", { type: "text", value: card.note, ariaLabel: "Note for the moderator" }); - note.addEventListener("change", () => edit({ note: note.value })); - const classes = ["mbseed-card", card.selected && "is-selected", sha === suggested && "is-default"].filter(Boolean).join(" "); - return el("article", { className: classes }, - el("label", { className: "mbseed-card-pick" }, - include, - el("img", { src: card.hostedUrl ?? card.cover.fetchedFrom, alt: card.note, loading: "lazy", referrerPolicy: "no-referrer" })), - el("ul", { className: "mbseed-card-facts" }, ...cardFacts(card).map((f) => el("li", { textContent: f }))), - el("div", { className: "mbseed-card-fields" }, - picker(IMAGE_TYPES, card.type, "Type", (type) => edit({ type })), - picker(CONTENT_RATINGS, card.contentRating, "Content rating", (contentRating) => edit({ contentRating })), - note), - card.hostedUrl ? el("a", { className: "mbseed-card-hosted", href: card.hostedUrl, target: "_blank", rel: "noopener", textContent: card.hostedUrl }) : "", - card.error ? el("p", { className: "mbseed-card-error", role: "alert", textContent: card.error }) : ""); - }), - ); + const result = session.result; + if (!result) return void container.replaceChildren(); + const fresh = !shelved.has(result); + shelved.add(result); + container.classList.toggle("is-fresh", fresh); + const span = seenSpan(session.cards.map((c) => c.cover)); + const mainSha = session.makeDefault ? (result.suggestedDefault?.sha256 ?? null) : null; + let n = 0; + const books = (cards: readonly ReviewCard[]) => cards.map((card) => book(card, n++, session, onEdit, span, mainSha)); + + if (container.dataset.view === "timeline") { + // A centre rail of years; within each year the covers alternate left and right of it. + container.replaceChildren(el("ol", { className: "mbseed-timeline" }, + ...timelineGroups(session.cards).map((group) => { + const placed = books(group.cards); + return el("li", { className: "mbseed-year" }, + el("div", { className: "mbseed-year-side is-left" }, ...placed.filter((_, i) => i % 2 === 0)), + el("h4", { className: "mbseed-year-key", textContent: String(group.year) }), + el("div", { className: "mbseed-year-side is-right" }, ...placed.filter((_, i) => i % 2 === 1))); + }))); + } else { + container.replaceChildren(el("div", { className: "mbseed-shelf" }, ...books(session.cards))); + } } export function renderPresent(container: HTMLElement, present: readonly { cover: InspectedCover; existing: ExistingImage }[]): void { container.replaceChildren( present.length - ? el("ul", {}, ...present.map((p) => el("li", {}, - el("img", { src: p.cover.fetchedFrom, alt: "", loading: "lazy", referrerPolicy: "no-referrer", width: 60 }), - ` ${p.cover.width}×${p.cover.height} — MangaBaka image #${p.existing.id} (${p.existing.language}, ${p.existing.type})`))) - : el("p", { textContent: "None of the found covers is on MangaBaka yet." }), + ? el("ul", { className: "mbseed-present-list" }, ...present.map((p) => el("li", {}, + el("img", { src: p.cover.fetchedFrom, alt: "", loading: "lazy", referrerPolicy: "no-referrer" }), + el("span", { textContent: `${p.cover.width}×${p.cover.height} · MangaBaka image #${p.existing.id} (${p.existing.language}, ${p.existing.type})` })))) + : el("p", { className: "mbseed-hint", textContent: "None of the found covers is on MangaBaka yet." }), ); } @@ -67,6 +110,6 @@ export function renderPreview(container: HTMLElement, preview: PreviewResult): v preview.has_changes ? el("ul", { className: "mbseed-diff" }, ...preview.changes.map((c) => el("li", { className: `is-${c.type}`, textContent: `${c.type}: ${c.label ?? c.identity ?? c.field}` }))) - : el("p", { textContent: "MangaBaka sees no changes: these covers are already there." }), + : el("p", { className: "mbseed-hint", textContent: "MangaBaka sees no changes: these covers are already there." }), ); } diff --git a/src/web/styles.css b/src/web/styles.css index 03b28ab..11dbec1 100644 --- a/src/web/styles.css +++ b/src/web/styles.css @@ -1,13 +1,368 @@ -.mbseed-app { font: 16px/1.5 system-ui, sans-serif; max-width: 72rem; margin: 0 auto; padding: 0 16px; } -.mbseed-app label { display: block; margin: 0.5rem 0; } -.mbseed-app .mbseed-inline { display: inline-block; margin-right: 1rem; } -.mbseed-app input:not([type]), .mbseed-app input[type="text"], .mbseed-app input[type="password"] { width: 100%; box-sizing: border-box; } -.mbseed-app .mbseed-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; } -.mbseed-app .mbseed-card { border: 1px solid #ccc; padding: 0.5rem; opacity: 0.6; } -.mbseed-app .mbseed-card.is-selected { opacity: 1; } -.mbseed-app .mbseed-card.is-default { outline: 3px solid #2a7; } -.mbseed-app .mbseed-card img { display: block; max-width: 100%; max-height: 16rem; margin: 0.5rem auto; } -.mbseed-app .is-error, .mbseed-app .mbseed-card-error { color: #b00020; } -.mbseed-app .mbseed-warning { background: #fff4ce; padding: 0.5rem; } -.mbseed-app textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; } +/* mangabaka-seeder — the Obi Shelf in a console layout (DESIGN.md). + Every rule is scoped under .mbseed-app / .mbseed-panel / .mbseed-page: the same file is injected + into a shadow root on mangabaka.org by the userscript. Never pure black or white grounds: covers + with black or white backgrounds must still show their edge. */ + +.mbseed-page, .mbseed-frame, .mbseed-panel { + --mb-page: #efe9df; + --mb-panel: #e6dfd2; + --mb-slip: #f8f4ec; + --mb-ink: #1d1b22; + --mb-ink-2: #55505a; + --mb-obi: #d6362f; + --mb-obi-deep: #8f1d18; + --mb-obi-ink: #fffaf6; + --mb-obi-text: #a3261f; /* red for small text: 6.1:1 on the page, 5.5:1 on the panel */ + --mb-teal: #2f6f6a; + --mb-kraft: #b59d78; + --mb-rail: #7d6847; + --mb-line: rgba(29, 27, 34, 0.2); + --mb-frame: rgba(29, 27, 34, 0.35); + --mb-track: rgba(29, 27, 34, 0.12); + --mb-shadow: rgba(29, 20, 10, 0.5); + --mb-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; + --mb-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; + --mb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231d1b22' stroke-width='1.6'/%3E%3C/svg%3E"); + color-scheme: light; +} + +@media (prefers-color-scheme: dark) { + .mbseed-page, .mbseed-frame, .mbseed-panel { + --mb-page: #2a2520; + --mb-panel: #332d27; + --mb-slip: #3b342d; + --mb-ink: #ece4d6; + --mb-ink-2: #bdb2a2; + --mb-obi: #c42f28; + --mb-obi-deep: #8e1f1a; + --mb-obi-text: #f2867b; + --mb-teal: #6db3a9; + --mb-kraft: #6e5a3f; + --mb-rail: #4a3c2a; + --mb-line: rgba(236, 228, 214, 0.16); + --mb-frame: rgba(236, 228, 214, 0.35); + --mb-track: rgba(236, 228, 214, 0.14); + --mb-shadow: rgba(0, 0, 0, 0.6); + --mb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ece4d6' stroke-width='1.6'/%3E%3C/svg%3E"); + color-scheme: dark; + } +} + +/* ---------- the page around the app ---------- */ +.mbseed-page { margin: 0; background: var(--mb-page); color: var(--mb-ink); font: 14px/1.5 var(--mb-sans); } + +/* ---------- app frame: three columns, stacking in narrow containers ---------- */ +/* The frame is the size container: a container query cannot restyle the container itself. */ +.mbseed-frame { container-type: inline-size; } +.mbseed-app { + display: grid; + grid-template-columns: minmax(250px, 290px) minmax(0, 1fr) minmax(260px, 300px); + background: var(--mb-page); + color: var(--mb-ink); + font: 14px/1.5 var(--mb-sans); + min-height: 100%; +} +.mbseed-app *, .mbseed-app *::before, .mbseed-app *::after { box-sizing: border-box; } .mbseed-app [hidden] { display: none !important; } +.mbseed-app ::selection { background: color-mix(in srgb, var(--mb-obi) 30%, transparent); } +.mbseed-app :focus-visible { outline: 2px solid var(--mb-teal); outline-offset: 2px; } +.mbseed-app .mbseed-review { display: contents; } + +.mbseed-app .mbseed-side { + background: var(--mb-panel); + padding: 18px 16px 24px; + display: flex; flex-direction: column; gap: 14px; + position: sticky; top: 0; align-self: start; + min-height: 100vh; max-height: 100vh; overflow: auto; + scrollbar-width: thin; scrollbar-color: var(--mb-kraft) transparent; +} +.mbseed-app .mbseed-side-left { grid-column: 1; grid-row: 1; border-right: 1px solid var(--mb-line); } +.mbseed-app .mbseed-side-right { grid-column: 3; grid-row: 1; border-left: 1px solid var(--mb-line); } +.mbseed-app .mbseed-main, .mbseed-app .mbseed-empty { grid-column: 2; grid-row: 1; padding: 18px 26px 56px; min-width: 0; } +.mbseed-app:has(#review:not([hidden])) .mbseed-empty { display: none; } + +@container (max-width: 1000px) { + .mbseed-app { grid-template-columns: minmax(0, 1fr); } + .mbseed-app .mbseed-side { position: static; min-height: 0; max-height: none; border: 0; } + .mbseed-app .mbseed-side-left { grid-column: 1; grid-row: 1; border-bottom: 1px solid var(--mb-line); } + .mbseed-app .mbseed-main, .mbseed-app .mbseed-empty { grid-column: 1; grid-row: 2; padding: 16px; } + .mbseed-app .mbseed-side-right { grid-column: 1; grid-row: 3; border-top: 3px solid var(--mb-ink); } +} + +/* ---------- type and small parts ---------- */ +.mbseed-app h2, .mbseed-app h3, .mbseed-app h4 { margin: 0; } +.mbseed-app .mbseed-cap { + font: 700 10.5px/1.2 var(--mb-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mb-ink-2); +} +.mbseed-app .mbseed-hint { margin: 0; font-size: 12.5px; color: var(--mb-ink-2); } +.mbseed-app .mbseed-line { margin: 0; font-size: 13px; min-height: 1.5em; } +.mbseed-app .is-error { color: var(--mb-obi-text); font-weight: 600; } +.mbseed-app a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; } +.mbseed-app a:hover { color: var(--mb-obi-text); } + +/* ---------- desk: slips, settings, the stamp ---------- */ +.mbseed-app .mbseed-brand { margin: 0; padding-bottom: 8px; border-bottom: 3px solid var(--mb-ink); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; } +.mbseed-app .mbseed-install { margin-top: auto; font-size: 12.5px; } +.mbseed-panel .mbseed-install, .mbseed-panel .mbseed-brand { display: none; } +.mbseed-app .mbseed-desk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } +.mbseed-app .mbseed-slip { + display: grid; gap: 3px; padding: 7px 10px 8px; + background: var(--mb-slip); border: 1px solid var(--mb-line); +} +.mbseed-app .mbseed-slip-label { font: 700 10px var(--mb-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mb-ink-2); } +.mbseed-app .mbseed-slip-hint { font-size: 11.5px; color: var(--mb-ink-2); } +.mbseed-app .mbseed-slip input { + width: 100%; min-width: 0; padding: 2px 0; border: 0; border-bottom: 1px dotted var(--mb-ink-2); + background: transparent; color: var(--mb-ink); font: 14px var(--mb-sans); text-overflow: ellipsis; +} +.mbseed-app .mbseed-slip input:focus { outline: none; border-bottom: 1.5px solid var(--mb-ink); } +.mbseed-app .mbseed-slip:focus-within { border-color: var(--mb-ink); } +.mbseed-app .mbseed-slip input::placeholder { color: var(--mb-ink-2); opacity: 0.7; } + +.mbseed-app .mbseed-settings { display: grid; gap: 6px; } +.mbseed-app .mbseed-setting { + display: flex; align-items: center; justify-content: space-between; gap: 10px; + font-size: 13px; color: var(--mb-ink-2); white-space: nowrap; +} +.mbseed-app .mbseed-settings { grid-template-columns: minmax(0, 1fr); } +.mbseed-app .mbseed-setting > span { flex: none; } +.mbseed-app .mbseed-setting > select { flex: 1 1 auto; min-width: 0; max-width: 9.5rem; text-overflow: ellipsis; } +.mbseed-app .mbseed-setting.is-stacked { flex-direction: column; align-items: stretch; gap: 3px; } +.mbseed-app .mbseed-setting.is-stacked input { + padding: 5px 8px; border: 1px solid var(--mb-line); background: var(--mb-slip); color: var(--mb-ink); font: 13px var(--mb-mono); +} + +/* Editable at a glance: every select is a boxed field with a drawn chevron. */ +.mbseed-app select, .mbseed-app .mbseed-select { + appearance: none; -webkit-appearance: none; + padding: 4px 26px 4px 9px; + border: 1px solid var(--mb-frame); border-bottom: 2px solid var(--mb-ink); + background: var(--mb-slip) var(--mb-chevron) no-repeat right 9px center; + color: var(--mb-ink); font: 600 13px var(--mb-sans); cursor: pointer; +} +.mbseed-app select:hover { border-color: var(--mb-ink); background-color: var(--mb-page); } +.mbseed-app select.is-small { padding: 2px 22px 2px 6px; font-size: 11.5px; background-position: right 7px center; min-width: 0; } +.mbseed-app select option { color: initial; } + +.mbseed-app .mbseed-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; cursor: pointer; } +/* Checkboxes and radios share the jacket ticks' square language. */ +.mbseed-app input[type="checkbox"]:not(.mbseed-tick), .mbseed-app input[type="radio"] { + appearance: none; -webkit-appearance: none; flex: none; width: 15px; height: 15px; margin: 2px 0 0; + border: 1.5px solid var(--mb-ink); background: var(--mb-slip); display: inline-grid; place-content: center; cursor: pointer; +} +.mbseed-app input[type="checkbox"]:not(.mbseed-tick)::before, .mbseed-app input[type="radio"]::before { + content: ""; width: 7px; height: 7px; background: var(--mb-ink); transform: scale(0); transition: transform 0.12s; +} +.mbseed-app input[type="checkbox"]:checked::before, .mbseed-app input[type="radio"]:checked::before { transform: scale(1); } +/* Single choice reads round; multiple choice stays square like the jacket ticks. */ +.mbseed-app input[type="radio"], .mbseed-app input[type="radio"]::before { border-radius: 50%; } +.mbseed-app .mbseed-check.is-main input:checked { border-color: var(--mb-obi); } +.mbseed-app .mbseed-check.is-main input::before { background: var(--mb-obi); } +.mbseed-app input:disabled { opacity: 0.45; cursor: not-allowed; } + +.mbseed-app .mbseed-button { + display: block; width: 100%; padding: 8px 12px; + border: 1.5px solid var(--mb-ink); background: transparent; color: var(--mb-ink); + font: 700 13px var(--mb-sans); cursor: pointer; text-align: center; + transition: background-color 0.15s, color 0.15s; +} +.mbseed-app .mbseed-button:hover:not(:disabled) { background: var(--mb-ink); color: var(--mb-page); } +.mbseed-app .mbseed-button.is-stamp { + background: var(--mb-obi); border-color: var(--mb-obi); color: var(--mb-obi-ink); + font-weight: 800; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 12px; +} +.mbseed-app .mbseed-button.is-stamp:hover:not(:disabled) { background: var(--mb-obi-deep); border-color: var(--mb-obi-deep); color: var(--mb-obi-ink); } +.mbseed-app .mbseed-button.is-quiet { border-color: transparent; text-decoration: underline; font-weight: 600; padding: 4px; } +.mbseed-app .mbseed-button:disabled { opacity: 0.4; cursor: not-allowed; } +.mbseed-app .mbseed-run-actions { display: grid; gap: 2px; } +.mbseed-app .mbseed-run-actions:not(:has(button:not([hidden]))) { display: none; } + +/* ---------- run status: stage plates that change in place ---------- */ +.mbseed-app .mbseed-status { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } +.mbseed-app .mbseed-plates { list-style: none; margin: 0; padding: 0; display: grid; } +.mbseed-app .mbseed-plates li span { flex: 1; } +.mbseed-app .mbseed-plates li em { font: 500 11.5px var(--mb-sans); font-style: normal; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; } +.mbseed-app .mbseed-plates li { + display: flex; align-items: center; gap: 8px; margin-top: -1px; padding: 5px 10px; + border: 1px solid var(--mb-line); font: 700 10.5px var(--mb-sans); letter-spacing: 0.1em; text-transform: uppercase; + color: var(--mb-ink-2); transition: background-color 0.3s, color 0.3s; +} +.mbseed-app .mbseed-plates li::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; flex: none; } +.mbseed-app .mbseed-plates li[data-state="done"] { color: var(--mb-ink); } +.mbseed-app .mbseed-plates li[data-state="done"]::before { background: var(--mb-teal); border-color: var(--mb-teal); } +.mbseed-app .mbseed-plates li[data-state="active"] { background: var(--mb-ink); color: var(--mb-page); } +.mbseed-app .mbseed-plates li[data-state="active"]::before { background: var(--mb-obi); border-color: var(--mb-obi); animation: mbseed-blink 1s steps(2) infinite; } +.mbseed-app .mbseed-plates li[data-state="failed"] { background: var(--mb-obi); color: var(--mb-obi-ink); } +.mbseed-app .mbseed-progress { width: 100%; height: 3px; appearance: none; border: 0; background: var(--mb-track); } +.mbseed-app .mbseed-progress::-webkit-progress-bar { background: var(--mb-track); } +.mbseed-app .mbseed-progress::-webkit-progress-value { background: var(--mb-teal); } +.mbseed-app .mbseed-progress::-moz-progress-bar { background: var(--mb-teal); } +.mbseed-app .mbseed-stage { margin: 0; font-size: 13px; overflow-wrap: anywhere; } +.mbseed-app .mbseed-notes-cap:has(+ .mbseed-warnings:empty) { display: none; } +.mbseed-app .mbseed-warnings { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 14rem; overflow: auto; } +.mbseed-app .mbseed-warnings li { font-size: 12px; color: var(--mb-ink-2); padding-left: 12px; position: relative; overflow-wrap: anywhere; } +.mbseed-app .mbseed-warnings li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; background: var(--mb-kraft); } + +/* ---------- empty state ---------- */ +.mbseed-app .mbseed-empty { max-width: 46rem; } +.mbseed-app .mbseed-empty h2 { font-size: clamp(22px, 3cqi, 30px); font-weight: 800; letter-spacing: -0.02em; margin: 24px 0 10px; text-wrap: balance; } +.mbseed-app .mbseed-empty p { color: var(--mb-ink-2); max-width: 62ch; margin: 0 0 10px; font-size: 14px; } +.mbseed-app .mbseed-empty strong { color: var(--mb-ink); } + +/* ---------- review head ---------- */ +.mbseed-app .mbseed-review-head { + display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; + border-bottom: 1px solid var(--mb-line); padding-bottom: 10px; +} +.mbseed-app .mbseed-title { font-size: clamp(24px, 3.2cqi, 38px); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; overflow-wrap: anywhere; } +.mbseed-app .mbseed-source { margin: 0; color: var(--mb-ink-2); font-size: 14px; } +.mbseed-app .mbseed-views { margin-left: auto; display: flex; border: 1.5px solid var(--mb-ink); } +.mbseed-app .mbseed-view { border: 0; background: transparent; color: var(--mb-ink); padding: 4px 12px; font: 700 12.5px var(--mb-sans); cursor: pointer; } +.mbseed-app .mbseed-view[aria-pressed="true"] { background: var(--mb-ink); color: var(--mb-page); } +.mbseed-app .mbseed-notice { + margin: 12px 0 0; padding: 8px 12px; font-size: 13px; + background: color-mix(in srgb, var(--mb-obi) 12%, var(--mb-page)); border-top: 2px solid var(--mb-obi); +} +.mbseed-app .mbseed-default { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 18px; align-items: baseline; margin-top: 10px; } +.mbseed-app .mbseed-default .mbseed-check { font-weight: 700; } +.mbseed-app .mbseed-count { margin: 0; color: var(--mb-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } +@container (max-width: 700px) { .mbseed-app .mbseed-default { grid-template-columns: 1fr; } } + +/* ---------- the shelf ---------- */ +.mbseed-app .mbseed-shelf { + display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: dense; + align-items: end; column-gap: 0; row-gap: 32px; margin-top: 18px; +} +.mbseed-app .mbseed-book { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; } +.mbseed-app .mbseed-shelf .mbseed-book { + padding: 0 10px; border-bottom: 10px solid var(--mb-kraft); box-shadow: 0 2px 0 var(--mb-rail); +} +.mbseed-app .mbseed-shelf .mbseed-book.is-wide { grid-column: span 2; } +@container (max-width: 420px) { .mbseed-app .mbseed-shelf .mbseed-book.is-wide { grid-column: span 1; } } + +.mbseed-app .mbseed-jacket { position: relative; display: block; cursor: pointer; } +.mbseed-app .mbseed-jacket img { + display: block; width: 100%; height: auto; max-height: 250px; object-fit: contain; object-position: bottom; + outline: 1px solid var(--mb-frame); outline-offset: -1px; + box-shadow: 0 8px 14px -8px var(--mb-shadow); + transition: filter 0.25s, opacity 0.25s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); +} +.mbseed-app .mbseed-tick { + position: absolute; top: 0; left: 0; margin: 0; width: 22px; height: 22px; cursor: pointer; + appearance: none; -webkit-appearance: none; background: var(--mb-slip); border: 1.5px solid var(--mb-ink); + display: grid; place-items: center; +} +.mbseed-app .mbseed-tick::after { content: ""; width: 10px; height: 10px; background: var(--mb-ink); transform: scale(0); transition: transform 0.15s; } +.mbseed-app .mbseed-tick:checked::after { transform: scale(1); } + +.mbseed-app .mbseed-obi { + position: relative; margin-top: -14px; display: grid; gap: 4px; padding: 6px 8px 8px; + background: var(--mb-slip); border: 1px solid var(--mb-line); border-top: 3px solid var(--mb-ink); + font-size: 11.5px; transition: opacity 0.25s; +} +.mbseed-app .mbseed-obi p { margin: 0; } +.mbseed-app .mbseed-obi-role { font: 800 10.5px var(--mb-sans); letter-spacing: 0.12em; text-transform: uppercase; } +.mbseed-app .mbseed-obi-facts { color: var(--mb-ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } +.mbseed-app .mbseed-seen { position: relative; height: 5px; background: var(--mb-track); } +.mbseed-app .mbseed-seen i { position: absolute; top: 0; bottom: 0; background: var(--mb-ink); } +.mbseed-app .mbseed-obi-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 6px; } +.mbseed-app .mbseed-obi-fields select { width: 100%; min-width: 0; text-overflow: ellipsis; } +.mbseed-app .mbseed-obi-seen-row { display: flex; align-items: center; gap: 6px; min-width: 0; } +.mbseed-app .mbseed-obi-seen-row .mbseed-seen { flex: 1; min-width: 0; } +/* Per-cover fields are printed on the band: underline and chevron, boxed only on hover or focus. */ +.mbseed-app .mbseed-obi select.is-small { + border: 1px solid transparent; border-bottom: 1px solid currentColor; background-color: transparent; color: inherit; + padding: 1px 14px 1px 0; font-weight: 600; background-position: right 1px center; +} +.mbseed-app .mbseed-obi select.is-small:hover, .mbseed-app .mbseed-obi select.is-small:focus-visible { + border-color: var(--mb-frame); border-bottom-color: currentColor; background-color: var(--mb-page); color: var(--mb-ink); padding-left: 4px; +} +.mbseed-app .mbseed-note { + width: 100%; min-width: 0; padding: 2px 0; border: 0; border-bottom: 1px dotted var(--mb-ink-2); + background: transparent; color: inherit; font: 11.5px var(--mb-sans); text-overflow: ellipsis; +} +.mbseed-app .mbseed-note:focus { outline: none; border-bottom: 1.5px solid currentColor; } +.mbseed-app .mbseed-obi-hosted { color: var(--mb-teal); font-weight: 700; font-size: 10.5px; flex: none; } +.mbseed-app .mbseed-obi-error { color: var(--mb-obi-text); font-weight: 600; overflow-wrap: anywhere; } + +.mbseed-app .mbseed-book.is-main .mbseed-obi { background: var(--mb-obi); color: var(--mb-obi-ink); border-color: var(--mb-obi); border-top-color: var(--mb-obi-deep); } +.mbseed-app .mbseed-book.is-main .mbseed-obi-facts { color: var(--mb-obi-ink); } +.mbseed-app .mbseed-book.is-main select.is-small { background-image: none; } +.mbseed-app .mbseed-book.is-main .mbseed-seen { background: color-mix(in srgb, var(--mb-obi-ink) 30%, transparent); } +.mbseed-app .mbseed-book.is-main .mbseed-seen i { background: var(--mb-obi-ink); } +.mbseed-app .mbseed-book.is-main .mbseed-obi-hosted { color: var(--mb-obi-ink); } +.mbseed-app .mbseed-book.is-main .mbseed-obi-error { color: var(--mb-obi-ink); } +.mbseed-app .mbseed-book.is-off .mbseed-jacket img { filter: grayscale(1) contrast(0.85); opacity: 0.5; transform: translateY(8px); } +.mbseed-app .mbseed-book.is-off .mbseed-obi-role { color: var(--mb-ink-2); } + +/* The one authored motion: a new run's covers are shelved, left to right. */ +.mbseed-app .is-fresh .mbseed-book { animation: mbseed-shelve 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(min(var(--i), 24) * 28ms); } +@keyframes mbseed-shelve { from { transform: translateY(14px); opacity: 0.35; } } +@keyframes mbseed-blink { 50% { opacity: 0.3; } } + +/* ---------- the timeline: a centre rail of years, covers alternating either side ---------- */ +.mbseed-app .mbseed-timeline { list-style: none; margin: 22px 0 0; padding: 0; position: relative; } +.mbseed-app .mbseed-timeline::before { + content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 5px; transform: translateX(-50%); + border-left: 1px solid var(--mb-ink); border-right: 1px solid var(--mb-ink); +} +.mbseed-app .mbseed-year { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: start; padding-bottom: 28px; } +.mbseed-app .mbseed-year-side { display: grid; gap: 22px; } +.mbseed-app .mbseed-year-side.is-right { padding-top: 46px; } +.mbseed-app .mbseed-year-key { + position: relative; z-index: 1; grid-column: 2; grid-row: 1; justify-self: center; padding: 3px 0; + background: var(--mb-page); color: var(--mb-obi-text); font: 800 13px var(--mb-sans); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; +} +.mbseed-app .mbseed-year-side.is-left { grid-column: 1; grid-row: 1; } +.mbseed-app .mbseed-year-side.is-right { grid-column: 3; grid-row: 1; } +.mbseed-app .mbseed-timeline .mbseed-book { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: end; } +.mbseed-app .mbseed-timeline .mbseed-book.is-wide { grid-template-columns: minmax(0, 1fr); } +.mbseed-app .mbseed-timeline .mbseed-jacket img { max-height: 170px; object-position: bottom left; } +.mbseed-app .mbseed-timeline .mbseed-obi { margin-top: 0; } +.mbseed-app .mbseed-timeline .mbseed-book.is-off .mbseed-jacket img { transform: none; } +@container (max-width: 760px) { + .mbseed-app .mbseed-timeline::before { left: 28px; } + .mbseed-app .mbseed-year { grid-template-columns: 56px minmax(0, 1fr); } + .mbseed-app .mbseed-year-key { grid-column: 1; } + .mbseed-app .mbseed-year-side.is-left, .mbseed-app .mbseed-year-side.is-right { grid-column: 2; grid-row: auto; padding-top: 0; } + .mbseed-app .mbseed-year-side.is-right { margin-top: 22px; } +} + +/* ---------- already on MangaBaka ---------- */ +.mbseed-app .mbseed-present { margin-top: 36px; border-top: 1px solid var(--mb-line); padding-top: 10px; } +.mbseed-app .mbseed-present summary { cursor: pointer; font-weight: 700; } +.mbseed-app .mbseed-present-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } +.mbseed-app .mbseed-present-list li { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--mb-ink-2); } +.mbseed-app .mbseed-present-list img { width: 48px; height: 48px; object-fit: contain; outline: 1px solid var(--mb-frame); outline-offset: -1px; } + +/* ---------- right panel: rehost, paste, file ---------- */ +.mbseed-app .mbseed-block { display: grid; gap: 8px; } +.mbseed-app .mbseed-hosts { margin: 0; padding: 0; border: 0; display: grid; } +.mbseed-app .mbseed-hosts label { + display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; padding: 6px 8px; margin-top: -1px; + border: 1px solid var(--mb-line); font-size: 13px; cursor: pointer; color: var(--mb-ink-2); +} +.mbseed-app .mbseed-hosts label:has(input:checked) { background: var(--mb-slip); color: var(--mb-ink); font-weight: 600; } +.mbseed-app .mbseed-hosts label:has(input:disabled) { opacity: 0.55; cursor: not-allowed; } +.mbseed-app .mbseed-hosts label > span { grid-column: 2; } +.mbseed-app .mbseed-hosts small { grid-column: 2; font-weight: 400; font-size: 11.5px; color: var(--mb-ink-2); } +.mbseed-app .mbseed-hosts small.is-warn { display: none; } +.mbseed-app .mbseed-hosts label:has(input:checked) small.is-warn { display: block; color: var(--mb-ink); } +.mbseed-app textarea { + width: 100%; resize: vertical; padding: 8px; border: 1px solid var(--mb-line); background: var(--mb-slip); color: var(--mb-ink); + font: 11.5px/1.45 var(--mb-mono); +} +.mbseed-app .mbseed-link { font-size: 13px; } +.mbseed-app .mbseed-final { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--mb-line); } +.mbseed-app .mbseed-final .is-stamp { margin-top: 10px; } +.mbseed-app .mbseed-diff { margin: 0; padding: 0; list-style: none; font-size: 12px; display: grid; gap: 2px; max-height: 12rem; overflow: auto; } +.mbseed-app .mbseed-diff li { overflow-wrap: anywhere; } +.mbseed-app .mbseed-diff .is-added { color: var(--mb-teal); } +.mbseed-app .mbseed-diff .is-removed { color: var(--mb-obi-text); } + +@media (prefers-reduced-motion: reduce) { + .mbseed-app *, .mbseed-app *::before, .mbseed-app *::after { animation: none !important; transition: none !important; } +} + +/* ---------- userscript panel chrome ---------- */ +.mbseed-panel { background: var(--mb-page); color: var(--mb-ink); font: 14px/1.5 var(--mb-sans); border: 1px solid var(--mb-frame); box-shadow: 0 18px 40px -18px var(--mb-shadow); min-height: 100%; } diff --git a/src/web/template.ts b/src/web/template.ts index aac05a6..ec1e7cd 100644 --- a/src/web/template.ts +++ b/src/web/template.ts @@ -1,68 +1,112 @@ /** Mounted by the page (into #app) and by the userscript (into a shadow root). Keep every id: app.ts looks them up. */ export const APP_HTML = /* html */ ` -
-
- - -
- - - -
-
- - - -
-
- -
-

- -
    -
    - -
    `; + Install the userscript + + +
    +

    Every cover a series has worn, on one shelf

    +

    Paste a MangaBaka series link and the series page on its source site, then press Find covers. + Current covers come straight from the source; older ones from the Wayback Machine.

    +

    Nothing is uploaded or sent to MangaBaka until you press a button for it.

    +
    + + +`; diff --git a/src/web/view-model.ts b/src/web/view-model.ts index 80ab258..aac7ed8 100644 --- a/src/web/view-model.ts +++ b/src/web/view-model.ts @@ -1,7 +1,7 @@ import { formatMonth } from "../core/covers"; import type { HostId, HostOptions } from "../core/hosting/host"; import { HOSTS } from "../core/hosting/registry"; -import type { Granularity } from "../core/model"; +import type { Granularity, InspectedCover } from "../core/model"; import type { Stage } from "../core/pipeline"; import type { ReviewCard } from "../core/session"; @@ -78,3 +78,45 @@ export function cardFacts(card: ReviewCard): string[] { if (!c.live) facts.push("only on archive.org"); return facts; } + +/** Months since year 0, from an archive timestamp (YYYYMM…) or a date. */ +const monthOf = (ts: string) => Number(ts.slice(0, 4)) * 12 + Number(ts.slice(4, 6)) - 1; +const monthNow = (now: Date) => now.getUTCFullYear() * 12 + now.getUTCMonth(); + +export interface Span { + from: number; + to: number; +} + +/** From the earliest sighting of any cover to now, in months. */ +export function seenSpan(covers: readonly InspectedCover[], now = new Date()): Span { + const to = monthNow(now); + const starts = covers.flatMap((c) => (c.candidate.seenAt ? [monthOf(c.candidate.seenAt)] : [])); + return { from: Math.min(to, ...starts), to }; +} + +function rangeOf(c: InspectedCover, now: Date): Span { + const to = monthNow(now); + const { seenAt, lastSeenAt, current } = c.candidate; + const start = seenAt ? monthOf(seenAt) : to; + return { from: start, to: current ? to : lastSeenAt ? monthOf(lastSeenAt) : start }; +} + +/** Where a cover's seen-period sits on the series' history, in percent, drawn to scale. */ +export function seenBar(c: InspectedCover, span: Span, now = new Date()): { left: number; width: number } { + const total = Math.max(1, span.to - span.from + 1); + const r = rangeOf(c, now); + const left = ((r.from - span.from) / total) * 100; + return { left, width: Math.max(1.5, Math.min(100 - left, ((r.to - r.from + 1) / total) * 100)) }; +} + +/** Timeline view: covers grouped by the year they were last seen (now, for current ones), newest first. */ +export function timelineGroups(cards: readonly ReviewCard[], now = new Date()): { year: number; cards: ReviewCard[] }[] { + const groups = new Map(); + const sorted = [...cards].sort((a, b) => rangeOf(b.cover, now).to - rangeOf(a.cover, now).to); + for (const card of sorted) { + const year = Math.floor(rangeOf(card.cover, now).to / 12); + groups.set(year, [...(groups.get(year) ?? []), card]); + } + return [...groups].map(([year, list]) => ({ year, cards: list })); +} diff --git a/test/view-model.test.ts b/test/view-model.test.ts index 011b097..ff47895 100644 --- a/test/view-model.test.ts +++ b/test/view-model.test.ts @@ -1,6 +1,6 @@ -import { expect, test } from "bun:test"; +import { describe, expect, test } from "bun:test"; import type { ReviewCard } from "../src/core/session"; -import { GRANULARITY_LABELS, cardFacts, defaultHost, hostChoices, stageText } from "../src/web/view-model"; +import { GRANULARITY_LABELS, cardFacts, defaultHost, hostChoices, seenBar, seenSpan, stageText, timelineGroups } from "../src/web/view-model"; import { inspected } from "./helpers/covers"; test("hosts: server first when it has room; hidden without storage; disabled when full", () => { @@ -38,3 +38,36 @@ test("card facts: size, shape, when seen, archive-only", () => { candidate: { current: false, seenAt: "20230401000000", lastSeenAt: "20260301000000" }, })))).toEqual(["720×1230", "2 KB", "landing-page art", "seen 2023-04 – 2026-03", "only on archive.org"]); }); + +describe("seen ranges and the timeline", () => { + const now = new Date(Date.UTC(2026, 9, 15)); // 2026-10 + const card = (candidate: NonNullable[0]>["candidate"]): ReviewCard => { + const cover = inspected({ candidate }); + return { cover, selected: true, type: cover.type, note: "", contentRating: "safe", hostedUrl: null, error: null }; + }; + const old = card({ current: false, seenAt: "20150312000000", lastSeenAt: "20150901000000" }); + const mid = card({ current: false, seenAt: "20190301000000", lastSeenAt: "20220901000000" }); + const live = card({ current: true }); + const liveArchived = card({ current: true, seenAt: "20230401000000" }); + + test("the span runs from the earliest sighting to now", () => { + expect(seenSpan([live.cover, old.cover, mid.cover], now)).toEqual({ from: 2015 * 12 + 2, to: 2026 * 12 + 9 }); + expect(seenSpan([live.cover], now)).toEqual({ from: 2026 * 12 + 9, to: 2026 * 12 + 9 }); + }); + + test("bars are drawn to scale; current covers reach the right edge", () => { + const span = seenSpan([old.cover, live.cover], now); + const total = span.to - span.from + 1; + expect(seenBar(old.cover, span, now)).toEqual({ left: 0, width: (7 / total) * 100 }); + const b = seenBar(liveArchived.cover, span, now); + expect(b.left + b.width).toBeCloseTo(100, 5); + expect(seenBar(live.cover, span, now).width).toBeGreaterThanOrEqual(1.5); + }); + + test("the timeline groups covers by the year they were last seen, newest first", () => { + const groups = timelineGroups([old, live, mid, liveArchived], now); + expect(groups.map((g) => g.year)).toEqual([2026, 2022, 2015]); + expect(groups[0]!.cards).toEqual([live, liveArchived]); + expect(groups[1]!.cards).toEqual([mid]); + }); +});