Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 16 additions & 15 deletions DESIGN.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,18 +152,19 @@ Solid Imager is a workbench, not a marketing site. Its visual character is calm,
compact, and media-first: the image collection receives the available area while
navigation and metadata remain immediately reachable without competing with it.

Three sources define the system, in this order:
This file defines the system in two layers:

1. The tokens in this file are the normative visual values.
2. The guidance below defines why and when those values are used.
3. `/design-lab` is the executable reference for layout and interaction behavior.

The `/v2/*` routes are the executable reference for layout and interaction
behavior.

Use the shared components in `packages/ui` and continue to source primitives from
Solid UI. The design lab may compose those primitives, but must not create a
parallel component library. The lab is a migration reference; it is not evidence
that a mocked concept such as accounts or a dedicated route must exist in the
product. Controls that only demonstrate a visual state in the lab are not an API or
feature contract until the corresponding product behavior is implemented.
Solid UI. Keep the V2 screens on those shared primitives instead of creating a
parallel component library. A visual state or control shown in design references
is not an API or feature contract until the corresponding product behavior is
implemented.

The governing principles are:

Expand Down Expand Up @@ -204,10 +205,9 @@ black-to-transparent gradient is allowed only as a thumbnail text scrim. Do not
a gray frame behind a full-size media preview; the preview itself should use the
available surface.

The current production theme and design-lab prototype predate this canonical
palette: the theme still contains a zinc/black primary while parts of the lab use
nearby colors inline. During migration, map the tokens above to shared CSS variables
first. Do not copy the lab's one-off hex values into production components.
The legacy production theme predates this canonical palette: it still contains a
zinc/black primary. During migration, map the tokens above to shared CSS variables
first. Do not introduce one-off hex values into production components.

## Typography

Expand All @@ -221,12 +221,13 @@ weight and spacing, not dramatic size jumps.
- Form labels and secondary table data use `label` (12px).
- Badges, counts, file extensions, and compact status text use `metadata` (11px).

Prefer sentence case. Use all caps only for very small design-lab taxonomy labels,
Prefer sentence case. Use all caps only for very small taxonomy labels,
never for ordinary navigation or actions. Filenames and identifiers may wrap or
truncate according to context, but they must expose the full value through the
detail view or an accessible name. A production control group uses one active
locale; do not mix Japanese and English labels inside the same workflow. Explanatory
copy in the design lab may remain Japanese while product localization is undecided.
copy in design documentation may remain Japanese while product localization is
undecided.

## Layout

Expand Down Expand Up @@ -423,8 +424,8 @@ browser Back must render the same item or source.

### Do

- Consult this file before changing shared UI, then compare the result in
`/design-lab` at wide and narrow viewports.
- Consult this file before changing shared UI, then compare the implemented
`/v2/*` routes at wide and narrow viewports.
- Reuse Solid UI primitives and promote recurring compositions into `packages/ui`.
- Give each region one scroll owner and verify direct navigation, reload, and Back.
- Use the shared spacing, radius, type, and color values instead of introducing a
Expand Down
2 changes: 1 addition & 1 deletion REPORT.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# V2 UI migration report

`/v2/*` は `DESIGN.md` と Design Lab を基準にした移行用フロントエンドです。検索、ソース操作、メディア管理、AI操作、設定、インポート、データ転送は実データへ接続し、未対応機能は推測データを表示せず無効化しています。
`/v2/*` は `DESIGN.md` を基準にした移行用フロントエンドです。検索、ソース操作、メディア管理、AI操作、設定、インポート、データ転送は実データへ接続し、未対応機能は推測データを表示せず無効化しています。

## Current implementation status

Expand Down
7 changes: 1 addition & 6 deletions apps/server/src/components/nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,5 @@ import { AppNav } from "@solid-imager/ui/layouts/app-nav";
import { PendingDownloadsIndicator } from "./imports/pending-downloads-indicator";

export default function Nav() {
return (
<AppNav
pendingDownloadsIndicator={<PendingDownloadsIndicator />}
showDesignLab
/>
);
return <AppNav pendingDownloadsIndicator={<PendingDownloadsIndicator />} />;
}
9 changes: 1 addition & 8 deletions apps/server/src/routes/__root.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,7 @@ function RootComponent() {
<body classList={{ "v2-theme": isV2Route() }}>
<ShortcutPreferencesProvider>
<Toaster />
<Show
fallback={<Outlet />}
when={
location().pathname !== "/design-lab" &&
!location().pathname.startsWith("/design-lab/") &&
!isV2Route()
}
>
<Show fallback={<Outlet />} when={!isV2Route()}>
<AppShell
nav={<Nav />}
statusIndicator={<RouteTransitionIndicator />}
Expand Down
12 changes: 0 additions & 12 deletions apps/server/src/routes/design-lab.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -373,8 +373,6 @@ graph LR
N368[npm:@solid-imager/ui/screens/sources-screen]
N369[npm:@solid-imager/ui/source-card]
N370[npm:@solid-imager/ui/source-delete-modal]
N371[routes/design-lab.tsx]
N372[npm:@solid-imager/ui/screens/design-concept-screen]
N0 --> N1
N0 --> N2
N0 --> N3
Expand Down Expand Up @@ -887,6 +885,4 @@ graph LR
N364 --> N282
N364 --> N341
N364 --> N303
N371 --> N372
N371 --> N282
```
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ graph LR
N75[apps/server/src/routes/__root.tsx]
N76[apps/server/src/routes/search.tsx]
N77[apps/server/src/routes/manager.tsx]
N78[apps/server/src/routes/design-lab.tsx]
N79[apps/server/src/routes/config.tsx]
N80[apps/server/src/routes/about.tsx]
N81[apps/server/src/routes/$.tsx]
Expand Down Expand Up @@ -198,7 +197,6 @@ graph LR
N74 --> N75
N74 --> N76
N74 --> N77
N74 --> N78
N74 --> N79
N74 --> N80
N74 --> N81
Expand Down
36 changes: 0 additions & 36 deletions docs/architecture/indexion-dependency-graph-05-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@ graph LR
N96[screens/source-media-screen.tsx]
N97[screens/config-state-screen.types.ts]
N98[query-state.ts]
N99[screens/design-concept-screen.tsx]
N100[npm:lucide-solid/icons/arrow-down-up]
N101[npm:lucide-solid/icons/arrow-left]
N102[npm:lucide-solid/icons/ban]
Expand Down Expand Up @@ -367,41 +366,6 @@ graph LR
N96 --> N9
N97 --> N74
N97 --> N98
N99 --> N100
N99 --> N101
N99 --> N102
N99 --> N103
N99 --> N104
N99 --> N105
N99 --> N106
N99 --> N107
N99 --> N108
N99 --> N109
N99 --> N110
N99 --> N111
N99 --> N112
N99 --> N113
N99 --> N114
N99 --> N115
N99 --> N116
N99 --> N117
N99 --> N118
N99 --> N119
N99 --> N120
N99 --> N121
N99 --> N122
N99 --> N123
N99 --> N124
N99 --> N125
N99 --> N126
N99 --> N127
N99 --> N128
N99 --> N129
N99 --> N130
N99 --> N131
N99 --> N132
N99 --> N133
N99 --> N134
N135 --> N2
N135 --> N90
N135 --> N93
Expand Down
41 changes: 0 additions & 41 deletions docs/architecture/indexion-dependency-graph-full.md
Original file line number Diff line number Diff line change
Expand Up @@ -724,8 +724,6 @@ graph LR
N719[npm:~/routes/v2/media-context]
N720[apps/server/src/routes/sources/$mediaSourceId/index.tsx]
N721[apps/server/src/routes/sources/index.tsx]
N722[apps/server/src/routes/design-lab.tsx]
N723[npm:@solid-imager/ui/screens/design-concept-screen]
N724[apps/server/src/components/imports/pending-downloads-indicator.tsx]
N725[apps/server/src/components/imports/pending-downloads-indicator-data.ts]
N726[apps/server/src/components/imports/v2-pending-downloads-indicator.tsx]
Expand Down Expand Up @@ -861,7 +859,6 @@ graph LR
N856[packages/ui/src/screens/source-media-screen.tsx]
N857[packages/ui/src/screens/config-state-screen.types.ts]
N858[packages/ui/src/query-state.ts]
N859[packages/ui/src/screens/design-concept-screen.tsx]
N860[npm:lucide-solid/icons/arrow-down-up]
N861[npm:lucide-solid/icons/arrow-left]
N862[npm:lucide-solid/icons/ban]
Expand Down Expand Up @@ -2251,8 +2248,6 @@ graph LR
N721 --> N666
N721 --> N118
N721 --> N678
N722 --> N723
N722 --> N666
N724 --> N49
N724 --> N725
N725 --> N48
Expand Down Expand Up @@ -2346,7 +2341,6 @@ graph LR
N771 --> N667
N771 --> N710
N771 --> N708
N771 --> N722
N771 --> N677
N771 --> N668
N771 --> N665
Expand Down Expand Up @@ -2520,41 +2514,6 @@ graph LR
N856 --> N780
N857 --> N426
N857 --> N858
N859 --> N860
N859 --> N861
N859 --> N862
N859 --> N863
N859 --> N864
N859 --> N865
N859 --> N866
N859 --> N867
N859 --> N868
N859 --> N869
N859 --> N870
N859 --> N871
N859 --> N872
N859 --> N873
N859 --> N874
N859 --> N875
N859 --> N876
N859 --> N877
N859 --> N878
N859 --> N879
N859 --> N880
N859 --> N881
N859 --> N882
N859 --> N883
N859 --> N884
N859 --> N885
N859 --> N886
N859 --> N887
N859 --> N888
N859 --> N889
N859 --> N890
N859 --> N891
N859 --> N892
N859 --> N893
N859 --> N894
N895 --> N774
N895 --> N850
N895 --> N853
Expand Down
8 changes: 4 additions & 4 deletions docs/architecture/indexion-dependency-graph.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# solid-imager source dependencies (indexion)

The complete indexion graph contains 1,810 edges, while the default Mermaid renderer allows 500 edges. Use the split diagrams below for VS Code preview.
The complete indexion graph contains 1,772 edges, while the default Mermaid renderer allows 500 edges. Use the split diagrams below for VS Code preview.

| Part | Scope | Edges |
| --- | --- | ---: |
| [01 apps and core](indexion-dependency-graph-01-apps-and-core.md) | CLI, Tauri, xtracter, and shared core packages | 431 |
| [02 server tests](indexion-dependency-graph-02-server-tests.md) | `apps/server/src/tests` | 333 |
| [03 server infrastructure and routes](indexion-dependency-graph-03-server-infrastructure-routes.md) | `apps/server/src/infrastructure` and `routes` | 514 |
| [04 server components and root modules](indexion-dependency-graph-04-server-application-components.md) | server components, config, root modules, and route dependencies | 117 |
| [05 UI](indexion-dependency-graph-05-ui.md) | `packages/ui/src` | 415 |
| [03 server infrastructure and routes](indexion-dependency-graph-03-server-infrastructure-routes.md) | `apps/server/src/infrastructure` and `routes` | 512 |
| [04 server components and root modules](indexion-dependency-graph-04-server-application-components.md) | server components, config, root modules, and route dependencies | 116 |
| [05 UI](indexion-dependency-graph-05-ui.md) | `packages/ui/src` | 380 |

The un-split graph is preserved in [indexion-dependency-graph-full.md](indexion-dependency-graph-full.md) for tools that allow a higher `maxEdges` value.

Expand Down
25 changes: 0 additions & 25 deletions packages/ui/src/layouts/app-nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { isServer } from "solid-js/web";

type AppNavProps = {
pendingDownloadsIndicator?: JSX.Element;
showDesignLab?: boolean;
};

const navigationItems = [
Expand Down Expand Up @@ -120,17 +119,6 @@ export function AppNav(props: AppNavProps) {
</Link>
</li>
))}
<Show when={props.showDesignLab}>
<li>
<a
aria-current={isActive("/design-lab") ? "page" : undefined}
class={desktopLinkClass("/design-lab")}
href="/design-lab"
>
Design Lab
</a>
</li>
</Show>
<li>
<a
class={desktopLinkClass("/docs")}
Expand Down Expand Up @@ -207,19 +195,6 @@ export function AppNav(props: AppNavProps) {
</Link>
</li>
))}
<Show when={props.showDesignLab}>
<li>
<a
aria-current={
isActive("/design-lab") ? "page" : undefined
}
class={`block min-h-11 ${mobileLinkClass("/design-lab")}`}
href="/design-lab"
>
Design Lab
</a>
</li>
</Show>
<li>
<a
class={`block min-h-11 ${mobileLinkClass("/docs")}`}
Expand Down
Loading