feat: scaffold agentic interior design workflow
This commit is contained in:
Codex
@@ -0,0 +1,24 @@
|
||||
FROM node:22-alpine AS dependencies
|
||||
WORKDIR /app
|
||||
RUN corepack enable
|
||||
COPY package.json ./
|
||||
RUN pnpm install --frozen-lockfile=false
|
||||
|
||||
FROM node:22-alpine AS builder
|
||||
WORKDIR /app
|
||||
RUN corepack enable
|
||||
ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
|
||||
ENV NEXT_PUBLIC_API_BASE_URL=${NEXT_PUBLIC_API_BASE_URL}
|
||||
ENV NEXT_OUTPUT_MODE=standalone
|
||||
COPY --from=dependencies /app/node_modules ./node_modules
|
||||
COPY . .
|
||||
RUN pnpm build
|
||||
|
||||
FROM node:22-alpine AS runner
|
||||
WORKDIR /app
|
||||
ENV NODE_ENV=production
|
||||
COPY --from=builder /app/public ./public
|
||||
COPY --from=builder /app/.next/standalone ./
|
||||
COPY --from=builder /app/.next/static ./.next/static
|
||||
EXPOSE 3000
|
||||
CMD ["node", "server.js"]
|
||||
@@ -0,0 +1,945 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
--bg: #e8ebe8;
|
||||
--surface: #f5f6f3;
|
||||
--surface-raised: #fbfcf9;
|
||||
--surface-muted: #e1e5e1;
|
||||
--canvas: #d7dbd6;
|
||||
--text: #1e2521;
|
||||
--text-soft: #66706a;
|
||||
--text-faint: #8b948e;
|
||||
--line: #cdd3ce;
|
||||
--line-strong: #b9c1bb;
|
||||
--accent: #3f6757;
|
||||
--accent-strong: #2f5244;
|
||||
--accent-soft: #d9e6df;
|
||||
--warning: #9a682d;
|
||||
--warning-soft: #f0e5d2;
|
||||
--shadow: 0 18px 55px rgb(49 67 58 / 0.1);
|
||||
--radius-surface: 14px;
|
||||
--radius-control: 10px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #1b211e;
|
||||
--surface: #222a26;
|
||||
--surface-raised: #29312d;
|
||||
--surface-muted: #303934;
|
||||
--canvas: #171c19;
|
||||
--text: #edf0ec;
|
||||
--text-soft: #b1bab4;
|
||||
--text-faint: #87918b;
|
||||
--line: #3a443e;
|
||||
--line-strong: #4b5750;
|
||||
--accent: #82ac99;
|
||||
--accent-strong: #9abbaa;
|
||||
--accent-soft: #31483d;
|
||||
--warning: #d5a05d;
|
||||
--warning-soft: #443726;
|
||||
--shadow: 0 20px 60px rgb(7 11 8 / 0.28);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
font-family: "Segoe UI Variable", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
textarea:focus-visible,
|
||||
[role="tab"]:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.studio-shell {
|
||||
min-height: 100dvh;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at 14% -10%, rgb(109 142 124 / 0.12), transparent 32%),
|
||||
var(--bg);
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: 70px;
|
||||
padding: 0 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: color-mix(in srgb, var(--surface) 88%, transparent);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.brand-block,
|
||||
.topbar-actions,
|
||||
.canvas-actions,
|
||||
.save-state,
|
||||
.button,
|
||||
.tab-trigger,
|
||||
.canvas-status,
|
||||
.lock-label,
|
||||
.inspector-footer > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.brand-block {
|
||||
gap: 11px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: var(--radius-control);
|
||||
color: #eef3ef;
|
||||
background: var(--accent-strong);
|
||||
}
|
||||
|
||||
.brand-name,
|
||||
.brand-subtitle,
|
||||
.rail-heading p,
|
||||
.panel-title,
|
||||
.panel-caption,
|
||||
.helper-text,
|
||||
.style-label,
|
||||
.constraint-section p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 14px;
|
||||
font-weight: 680;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
margin-top: 3px;
|
||||
color: var(--text-soft);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.save-state {
|
||||
gap: 5px;
|
||||
margin-right: 6px;
|
||||
color: var(--text-soft);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.button,
|
||||
.icon-button,
|
||||
.send-button {
|
||||
min-height: 36px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: 13px;
|
||||
font-weight: 620;
|
||||
transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
|
||||
}
|
||||
|
||||
.button {
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
padding: 0 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button:active,
|
||||
.icon-button:active,
|
||||
.send-button:active,
|
||||
.stage-item:active,
|
||||
.layer-row:active,
|
||||
.direction-option:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
color: #f1f5f2;
|
||||
background: var(--accent-strong);
|
||||
border-color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
color: var(--text);
|
||||
background: var(--surface-raised);
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
.button-secondary:hover,
|
||||
.icon-button:hover {
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.button.compact {
|
||||
min-height: 34px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.button.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.studio-grid {
|
||||
min-height: calc(100dvh - 70px);
|
||||
display: grid;
|
||||
grid-template-columns: 210px minmax(560px, 1fr) 330px;
|
||||
}
|
||||
|
||||
.workflow-rail,
|
||||
.style-inspector {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.workflow-rail {
|
||||
padding: 22px 14px;
|
||||
border-right: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.rail-heading {
|
||||
padding: 0 8px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
color: var(--text-soft);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.rail-heading p {
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.stage-list {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.stage-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 52px;
|
||||
padding: 7px 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 24px 1fr;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text-soft);
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.stage-item:hover {
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
.stage-active {
|
||||
color: var(--text);
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
||||
}
|
||||
|
||||
.stage-index {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 50%;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.stage-complete .stage-index {
|
||||
color: #edf4ef;
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.stage-active .stage-index {
|
||||
border: 6px solid var(--accent);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
.stage-copy {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.stage-copy strong {
|
||||
font-size: 12px;
|
||||
font-weight: 630;
|
||||
}
|
||||
|
||||
.stage-copy small {
|
||||
color: var(--text-faint);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.rail-note {
|
||||
margin: 24px 4px 0;
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 8px;
|
||||
color: var(--warning);
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--warning-soft);
|
||||
}
|
||||
|
||||
.rail-note p {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(540px, 1fr) auto;
|
||||
background: var(--canvas);
|
||||
}
|
||||
|
||||
.workspace-tabs,
|
||||
.tab-content {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.workspace-toolbar {
|
||||
height: 54px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tab-trigger {
|
||||
min-height: 34px;
|
||||
gap: 6px;
|
||||
padding: 0 11px;
|
||||
border: 0;
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text-soft);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tab-trigger[data-state="active"] {
|
||||
color: var(--text);
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.canvas-actions {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.icon-button,
|
||||
.send-button {
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--text-soft);
|
||||
border-color: var(--line);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
.icon-button.small {
|
||||
width: 30px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
z-index: 20;
|
||||
padding: 7px 9px;
|
||||
border-radius: 7px;
|
||||
color: var(--surface-raised);
|
||||
background: var(--text);
|
||||
font-size: 11px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.plan-workspace {
|
||||
height: calc(100% - 54px);
|
||||
min-height: 486px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 210px;
|
||||
}
|
||||
|
||||
.plan-canvas {
|
||||
min-width: 0;
|
||||
padding: 18px;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.canvas-labels,
|
||||
.canvas-status {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--text-soft);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.canvas-labels span:first-child {
|
||||
color: var(--text);
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.plan-image-frame {
|
||||
position: relative;
|
||||
min-height: 405px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-surface);
|
||||
background: #f1f2ee;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.plan-image {
|
||||
object-fit: contain;
|
||||
padding: 12px;
|
||||
filter: contrast(1.02) saturate(0.72);
|
||||
}
|
||||
|
||||
.region-outline {
|
||||
position: absolute;
|
||||
inset: 8% 10% 9% 9%;
|
||||
border: 2px solid color-mix(in srgb, var(--accent) 78%, transparent);
|
||||
border-radius: 9px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.issue-marker {
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff9ef;
|
||||
border: 2px solid #f7ead5;
|
||||
border-radius: 50%;
|
||||
background: var(--warning);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 5px 18px rgb(104 71 32 / 0.22);
|
||||
}
|
||||
|
||||
.issue-one {
|
||||
left: 31%;
|
||||
top: 24%;
|
||||
}
|
||||
|
||||
.issue-two {
|
||||
right: 26%;
|
||||
bottom: 23%;
|
||||
}
|
||||
|
||||
.canvas-status {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.canvas-status span:first-child {
|
||||
gap: 5px;
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.canvas-status span:last-child {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.layer-panel {
|
||||
padding: 18px 14px;
|
||||
border-left: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.panel-title-row,
|
||||
.inspector-heading {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 13px;
|
||||
font-weight: 680;
|
||||
}
|
||||
|
||||
.panel-caption {
|
||||
margin-top: 4px;
|
||||
color: var(--text-faint);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.layer-list {
|
||||
margin-top: 15px;
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.layer-row {
|
||||
min-height: 37px;
|
||||
padding: 0 9px;
|
||||
display: grid;
|
||||
grid-template-columns: 20px 1fr auto;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--text-faint);
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.layer-row:hover {
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.layer-row.is-visible {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.layer-row small {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.panel-divider {
|
||||
height: 1px;
|
||||
margin: 18px 0;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
margin-top: 10px;
|
||||
padding: 3px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.segmented-control button {
|
||||
min-height: 30px;
|
||||
padding: 0 5px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
color: var(--text-soft);
|
||||
background: transparent;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.segmented-control button.active {
|
||||
color: var(--text);
|
||||
background: var(--surface-raised);
|
||||
box-shadow: 0 2px 7px rgb(49 67 58 / 0.1);
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
margin-top: 10px;
|
||||
color: var(--text-faint);
|
||||
font-size: 10px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.empty-workspace {
|
||||
min-height: 486px;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-faint);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-workspace h2 {
|
||||
margin: 14px 0 6px;
|
||||
color: var(--text);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.empty-workspace p {
|
||||
max-width: 360px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.conversation {
|
||||
min-height: 210px;
|
||||
padding: 14px 18px 16px;
|
||||
border-top: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.message-stream {
|
||||
max-height: 132px;
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 84%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.message-user {
|
||||
justify-self: end;
|
||||
grid-template-columns: 1fr;
|
||||
padding: 9px 11px;
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.assistant-icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--accent-strong);
|
||||
border-radius: 8px;
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.message p {
|
||||
margin: 2px 0 0;
|
||||
color: var(--text-soft);
|
||||
font-size: 11px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.message small {
|
||||
color: var(--text);
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.composer {
|
||||
margin-top: 12px;
|
||||
padding: 9px 10px 8px 12px;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-surface);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
.composer label {
|
||||
display: block;
|
||||
color: var(--text-faint);
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.composer-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.composer input {
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.composer input::placeholder {
|
||||
color: var(--text-faint);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.composer input:focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
width: 32px;
|
||||
min-height: 32px;
|
||||
color: #f2f6f3;
|
||||
border: 0;
|
||||
background: var(--accent-strong);
|
||||
}
|
||||
|
||||
.style-inspector {
|
||||
min-width: 0;
|
||||
padding: 20px 18px;
|
||||
border-left: 1px solid var(--line);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.lock-label {
|
||||
gap: 4px;
|
||||
padding: 5px 7px;
|
||||
color: var(--accent-strong);
|
||||
border-radius: 7px;
|
||||
background: var(--accent-soft);
|
||||
font-size: 9px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.style-section {
|
||||
margin-top: 21px;
|
||||
}
|
||||
|
||||
.style-section label,
|
||||
.style-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-soft);
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.style-section textarea {
|
||||
width: 100%;
|
||||
min-height: 75px;
|
||||
padding: 10px;
|
||||
resize: vertical;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text);
|
||||
background: var(--surface-raised);
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.direction-list {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.direction-option {
|
||||
width: 100%;
|
||||
min-height: 75px;
|
||||
padding: 9px;
|
||||
display: grid;
|
||||
grid-template-columns: 38px 1fr 16px;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--surface-raised);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.direction-option:hover {
|
||||
border-color: var(--line-strong);
|
||||
}
|
||||
|
||||
.direction-option.selected {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.direction-colors {
|
||||
height: 49px;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
border-radius: 7px;
|
||||
border: 1px solid rgb(71 84 76 / 0.16);
|
||||
}
|
||||
|
||||
.direction-option > span:nth-child(2) {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.direction-option strong {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.direction-option small {
|
||||
color: var(--text-soft);
|
||||
font-size: 9px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tag-list span,
|
||||
.tag-list button {
|
||||
min-height: 28px;
|
||||
padding: 0 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
color: var(--text-soft);
|
||||
background: var(--surface-raised);
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.constraint-section {
|
||||
padding: 11px;
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.constraint-section p:last-child {
|
||||
color: var(--text-soft);
|
||||
font-size: 10px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.inspector-footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.inspector-footer > div {
|
||||
gap: 6px;
|
||||
margin-bottom: 10px;
|
||||
color: var(--text-faint);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.studio-grid {
|
||||
grid-template-columns: 190px minmax(520px, 1fr);
|
||||
}
|
||||
|
||||
.style-inspector {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.topbar {
|
||||
height: auto;
|
||||
min-height: 66px;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.save-state,
|
||||
.topbar-actions .button-secondary,
|
||||
.brand-subtitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.studio-grid {
|
||||
min-height: calc(100dvh - 66px);
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.workflow-rail {
|
||||
padding: 9px 12px;
|
||||
overflow-x: auto;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.rail-heading,
|
||||
.rail-note,
|
||||
.stage-copy small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stage-list {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.stage-item {
|
||||
min-width: 104px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
|
||||
.plan-workspace {
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.plan-canvas {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.plan-image-frame {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.layer-panel {
|
||||
border-top: 1px solid var(--line);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.layer-list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.conversation {
|
||||
min-height: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import type { Metadata } from "next";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "空间风格工作台",
|
||||
description: "从户型清洗到 Style DNA 和多轮效果图编辑的空间概念设计工作台。",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
|
||||
return (
|
||||
<html lang="zh-CN">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { WorkflowStudio } from "@/components/workflow-studio";
|
||||
|
||||
export default function Home() {
|
||||
return <WorkflowStudio />;
|
||||
}
|
||||
@@ -0,0 +1,333 @@
|
||||
"use client";
|
||||
|
||||
import * as Tabs from "@radix-ui/react-tabs";
|
||||
import * as Tooltip from "@radix-ui/react-tooltip";
|
||||
import {
|
||||
ArrowRightIcon,
|
||||
ArrowsOutIcon,
|
||||
BuildingsIcon,
|
||||
CheckIcon,
|
||||
CircleNotchIcon,
|
||||
CubeIcon,
|
||||
EyeIcon,
|
||||
EyeSlashIcon,
|
||||
ImageIcon,
|
||||
LockSimpleIcon,
|
||||
PaperPlaneTiltIcon,
|
||||
PlusIcon,
|
||||
SlidersHorizontalIcon,
|
||||
SparkleIcon,
|
||||
UploadSimpleIcon,
|
||||
WarningCircleIcon,
|
||||
} from "@phosphor-icons/react";
|
||||
import Image from "next/image";
|
||||
import { FormEvent, useMemo, useState } from "react";
|
||||
|
||||
import {
|
||||
initialLayers,
|
||||
initialMessages,
|
||||
styleDirections,
|
||||
workflowStages,
|
||||
} from "@/lib/demo";
|
||||
import type { ChatMessage } from "@/types/workflow";
|
||||
|
||||
const iconWeight = "regular" as const;
|
||||
|
||||
export function WorkflowStudio() {
|
||||
const [layers, setLayers] = useState(initialLayers);
|
||||
const [selectedDirection, setSelectedDirection] = useState("quiet-modern");
|
||||
const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);
|
||||
const [draft, setDraft] = useState("");
|
||||
const [furnitureMode, setFurnitureMode] = useState<"reference" | "remove">("reference");
|
||||
|
||||
const currentDirection = useMemo(
|
||||
() => styleDirections.find((item) => item.id === selectedDirection) ?? styleDirections[0],
|
||||
[selectedDirection],
|
||||
);
|
||||
|
||||
function toggleLayer(id: string) {
|
||||
setLayers((items) =>
|
||||
items.map((item) => (item.id === id ? { ...item, visible: !item.visible } : item)),
|
||||
);
|
||||
}
|
||||
|
||||
function sendMessage(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
const value = draft.trim();
|
||||
if (!value) return;
|
||||
setMessages((items) => [
|
||||
...items,
|
||||
{ id: `user-${Date.now()}`, role: "user", body: value },
|
||||
{
|
||||
id: `assistant-${Date.now()}`,
|
||||
role: "assistant",
|
||||
body: "已记录为设计约束。正式接入后，这条指令会先更新布局锁定和 Style DNA，再只重绘受影响视角。",
|
||||
meta: "结构化修改",
|
||||
},
|
||||
]);
|
||||
setDraft("");
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip.Provider delayDuration={250}>
|
||||
<main className="studio-shell">
|
||||
<header className="topbar">
|
||||
<div className="brand-block">
|
||||
<div className="brand-mark" aria-hidden="true">
|
||||
<BuildingsIcon size={19} weight="fill" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="brand-name">空间风格工作台</p>
|
||||
<p className="brand-subtitle">11-2-104 住宅概念方案</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="topbar-actions">
|
||||
<span className="save-state"><CheckIcon size={14} weight="bold" /> 已保存</span>
|
||||
<button className="button button-secondary" type="button">版本记录</button>
|
||||
<button className="button button-primary" type="button">
|
||||
确认结构 <ArrowRightIcon size={16} weight="bold" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="studio-grid">
|
||||
<aside className="workflow-rail" aria-label="设计流程">
|
||||
<div className="rail-heading">
|
||||
<p>设计流程</p>
|
||||
<span>3 / 8</span>
|
||||
</div>
|
||||
<nav className="stage-list">
|
||||
{workflowStages.map((stage) => (
|
||||
<button
|
||||
className={`stage-item stage-${stage.status}`}
|
||||
key={stage.id}
|
||||
type="button"
|
||||
aria-current={stage.status === "active" ? "step" : undefined}
|
||||
>
|
||||
<span className="stage-index" aria-hidden="true">
|
||||
{stage.status === "complete" ? <CheckIcon size={13} weight="bold" /> : null}
|
||||
</span>
|
||||
<span className="stage-copy">
|
||||
<strong>{stage.label}</strong>
|
||||
<small>{stage.detail}</small>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="rail-note">
|
||||
<WarningCircleIcon size={18} weight={iconWeight} />
|
||||
<p>有 2 项需要确认，确认后才能生成空间白模。</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section className="workspace">
|
||||
<Tabs.Root defaultValue="plan" className="workspace-tabs">
|
||||
<div className="workspace-toolbar">
|
||||
<Tabs.List className="tab-list" aria-label="工作区视图">
|
||||
<Tabs.Trigger className="tab-trigger" value="plan">
|
||||
<SlidersHorizontalIcon size={16} /> 户型清洗
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger className="tab-trigger" value="blockout">
|
||||
<CubeIcon size={16} /> 3D 白模
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger className="tab-trigger" value="renders">
|
||||
<ImageIcon size={16} /> 效果图
|
||||
</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
|
||||
<div className="canvas-actions">
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger asChild>
|
||||
<button className="icon-button" type="button" aria-label="适应画布">
|
||||
<ArrowsOutIcon size={18} />
|
||||
</button>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal><Tooltip.Content className="tooltip">适应画布</Tooltip.Content></Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
<button className="button button-secondary compact" type="button">
|
||||
<UploadSimpleIcon size={16} /> 更换图纸
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs.Content value="plan" className="tab-content">
|
||||
<div className="plan-workspace">
|
||||
<div className="plan-canvas">
|
||||
<div className="canvas-labels">
|
||||
<span>上方住宅户型</span>
|
||||
<span>矢量 PDF · 43 个 CAD 图层</span>
|
||||
</div>
|
||||
<div className="plan-image-frame">
|
||||
<Image
|
||||
src="/sample-plan.png"
|
||||
alt="从真实 PDF 中分离出的住宅建筑结构平面图"
|
||||
fill
|
||||
priority
|
||||
sizes="(max-width: 900px) 100vw, 60vw"
|
||||
className="plan-image"
|
||||
/>
|
||||
<div className="region-outline" aria-hidden="true" />
|
||||
<button className="issue-marker issue-one" type="button" aria-label="比例待确认">1</button>
|
||||
<button className="issue-marker issue-two" type="button" aria-label="家具意图待确认">2</button>
|
||||
</div>
|
||||
<div className="canvas-status">
|
||||
<span><CheckIcon size={14} weight="bold" /> 已分离建筑结构</span>
|
||||
<span>比例待交叉校准</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside className="layer-panel">
|
||||
<div className="panel-title-row">
|
||||
<div>
|
||||
<p className="panel-title">图层</p>
|
||||
<p className="panel-caption">保留矢量信息</p>
|
||||
</div>
|
||||
<button className="icon-button small" type="button" aria-label="添加图层">
|
||||
<PlusIcon size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="layer-list">
|
||||
{layers.map((layer) => (
|
||||
<button
|
||||
className={`layer-row ${layer.visible ? "is-visible" : ""}`}
|
||||
key={layer.id}
|
||||
type="button"
|
||||
onClick={() => toggleLayer(layer.id)}
|
||||
>
|
||||
{layer.visible ? <EyeIcon size={17} /> : <EyeSlashIcon size={17} />}
|
||||
<span>{layer.label}</span>
|
||||
{layer.count ? <small>{layer.count}</small> : null}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="panel-divider" />
|
||||
<p className="panel-title">原家具处理</p>
|
||||
<div className="segmented-control">
|
||||
<button
|
||||
type="button"
|
||||
className={furnitureMode === "reference" ? "active" : ""}
|
||||
onClick={() => setFurnitureMode("reference")}
|
||||
>保留参考</button>
|
||||
<button
|
||||
type="button"
|
||||
className={furnitureMode === "remove" ? "active" : ""}
|
||||
onClick={() => setFurnitureMode("remove")}
|
||||
>仅看结构</button>
|
||||
</div>
|
||||
<p className="helper-text">家具位置用于理解尺度，不锁定款式和材质。</p>
|
||||
</aside>
|
||||
</div>
|
||||
</Tabs.Content>
|
||||
|
||||
<Tabs.Content value="blockout" className="tab-content empty-workspace">
|
||||
<CubeIcon size={38} weight="thin" />
|
||||
<h2>白模将在结构确认后生成</h2>
|
||||
<p>系统会拉伸墙体、门窗和柱，并自动建立三个室内相机。</p>
|
||||
</Tabs.Content>
|
||||
|
||||
<Tabs.Content value="renders" className="tab-content empty-workspace">
|
||||
<ImageIcon size={38} weight="thin" />
|
||||
<h2>先选定风格方向</h2>
|
||||
<p>低成本方向图通过后，再生成完整多视角效果图。</p>
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
|
||||
<section className="conversation" aria-label="设计对话">
|
||||
<div className="message-stream">
|
||||
{messages.slice(-3).map((message) => (
|
||||
<article className={`message message-${message.role}`} key={message.id}>
|
||||
{message.role === "assistant" ? (
|
||||
<span className="assistant-icon"><SparkleIcon size={15} weight="fill" /></span>
|
||||
) : null}
|
||||
<div>
|
||||
{message.meta ? <small>{message.meta}</small> : null}
|
||||
<p>{message.body}</p>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
<form className="composer" onSubmit={sendMessage}>
|
||||
<label htmlFor="design-instruction">告诉我需要保留什么，或者希望空间给人怎样的感受</label>
|
||||
<div className="composer-row">
|
||||
<input
|
||||
id="design-instruction"
|
||||
value={draft}
|
||||
onChange={(event) => setDraft(event.target.value)}
|
||||
placeholder="例如：保留床和窗的位置，客厅更松弛，不要冷灰"
|
||||
/>
|
||||
<button className="send-button" type="submit" aria-label="发送设计指令">
|
||||
<PaperPlaneTiltIcon size={18} weight="fill" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<aside className="style-inspector">
|
||||
<div className="inspector-heading">
|
||||
<div>
|
||||
<p className="panel-title">Style DNA</p>
|
||||
<p className="panel-caption">跨视角设计约束</p>
|
||||
</div>
|
||||
<span className="lock-label"><LockSimpleIcon size={13} /> 2 项锁定</span>
|
||||
</div>
|
||||
|
||||
<div className="style-section">
|
||||
<label htmlFor="style-concept">设计概念</label>
|
||||
<textarea id="style-concept" defaultValue="温暖、克制、带自然材质感的现代住宅" />
|
||||
</div>
|
||||
|
||||
<div className="style-section">
|
||||
<p className="style-label">方向草案</p>
|
||||
<div className="direction-list">
|
||||
{styleDirections.map((direction) => (
|
||||
<button
|
||||
type="button"
|
||||
key={direction.id}
|
||||
className={`direction-option ${selectedDirection === direction.id ? "selected" : ""}`}
|
||||
onClick={() => setSelectedDirection(direction.id)}
|
||||
>
|
||||
<span className="direction-colors" aria-hidden="true">
|
||||
{direction.colors.map((color) => (
|
||||
<span key={color} style={{ backgroundColor: color }} />
|
||||
))}
|
||||
</span>
|
||||
<span>
|
||||
<strong>{direction.name}</strong>
|
||||
<small>{direction.summary}</small>
|
||||
</span>
|
||||
{selectedDirection === direction.id ? <CheckIcon size={15} weight="bold" /> : null}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="style-section material-section">
|
||||
<p className="style-label">材料语言</p>
|
||||
<div className="tag-list">
|
||||
{currentDirection.materials.map((material) => <span key={material}>{material}</span>)}
|
||||
<button type="button"><PlusIcon size={13} /> 添加</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="style-section constraint-section">
|
||||
<p className="style-label">明确避免</p>
|
||||
<p>大面积冷灰、高亮岩板、过量灯带</p>
|
||||
</div>
|
||||
|
||||
<div className="inspector-footer">
|
||||
<div>
|
||||
<CircleNotchIcon size={17} />
|
||||
<span>等待结构确认</span>
|
||||
</div>
|
||||
<button className="button button-primary full" type="button">保存风格草案</button>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
</Tooltip.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||
import nextTypescript from "eslint-config-next/typescript";
|
||||
|
||||
export default defineConfig([
|
||||
...nextVitals,
|
||||
...nextTypescript,
|
||||
globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
|
||||
]);
|
||||
@@ -0,0 +1,64 @@
|
||||
import type {
|
||||
ChatMessage,
|
||||
PlanLayer,
|
||||
StyleDirection,
|
||||
WorkflowStage,
|
||||
} from "@/types/workflow";
|
||||
|
||||
export const workflowStages: WorkflowStage[] = [
|
||||
{ id: "uploaded", label: "导入图纸", detail: "矢量 PDF", status: "complete" },
|
||||
{ id: "region_selection", label: "选择户型", detail: "住宅区域", status: "complete" },
|
||||
{ id: "plan_review", label: "确认结构", detail: "当前步骤", status: "active" },
|
||||
{ id: "blockout", label: "生成白模", detail: "空间骨架", status: "pending" },
|
||||
{ id: "style_brief", label: "明确风格", detail: "Style DNA", status: "pending" },
|
||||
{ id: "direction_selection", label: "选择方向", detail: "三个方案", status: "pending" },
|
||||
{ id: "render_review", label: "审阅效果", detail: "多视角", status: "pending" },
|
||||
{ id: "editing", label: "多轮修改", detail: "局部编辑", status: "pending" },
|
||||
];
|
||||
|
||||
export const initialLayers: PlanLayer[] = [
|
||||
{ id: "structure", label: "建筑结构", visible: true, count: 18 },
|
||||
{ id: "openings", label: "门窗", visible: true, count: 14 },
|
||||
{ id: "furniture", label: "原家具", visible: false, count: 32 },
|
||||
{ id: "dimensions", label: "尺寸标注", visible: false },
|
||||
{ id: "labels", label: "房间文字", visible: false },
|
||||
];
|
||||
|
||||
export const styleDirections: StyleDirection[] = [
|
||||
{
|
||||
id: "quiet-modern",
|
||||
name: "清透现代",
|
||||
summary: "轻盈体块、浅木与柔和自然光，保持客餐厅的开阔关系。",
|
||||
colors: ["#E7E9E5", "#B8A68A", "#56695F"],
|
||||
materials: ["浅橡木", "亚麻", "哑光涂料"],
|
||||
},
|
||||
{
|
||||
id: "soft-architectural",
|
||||
name: "柔和构成",
|
||||
summary: "用低矮家具和圆角收束空间，重点塑造入口到客厅的连续视线。",
|
||||
colors: ["#D9D7D0", "#8F8B82", "#3E5149"],
|
||||
materials: ["微水泥", "烟熏木", "织物"],
|
||||
},
|
||||
{
|
||||
id: "natural-contrast",
|
||||
name: "自然对比",
|
||||
summary: "增加深木与石材对比，但限制高光材质，避免空间变得沉重。",
|
||||
colors: ["#E5E1D7", "#8B735F", "#31443B"],
|
||||
materials: ["洞石", "深木", "羊毛"],
|
||||
},
|
||||
];
|
||||
|
||||
export const initialMessages: ChatMessage[] = [
|
||||
{
|
||||
id: "assistant-1",
|
||||
role: "assistant",
|
||||
body: "我识别到两个平面区域，已选择上方住宅户型。结构层和门窗层可信度较高。",
|
||||
meta: "图纸解析",
|
||||
},
|
||||
{
|
||||
id: "assistant-2",
|
||||
role: "assistant",
|
||||
body: "请确认原家具的处理方式。当前建议保留家具位置作为参考，但不锁定具体款式。",
|
||||
meta: "等待确认",
|
||||
},
|
||||
];
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
import "./.next/types/routes.d.ts";
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
@@ -0,0 +1,8 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
poweredByHeader: false,
|
||||
...(process.env.NEXT_OUTPUT_MODE === "standalone" ? { output: "standalone" as const } : {}),
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "@zhuangxiu/web",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint .",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@phosphor-icons/react": "^2.1.10",
|
||||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"next": "^16.0.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.0.0",
|
||||
"@types/react": "^19.2.0",
|
||||
"@types/react-dom": "^19.2.0",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-config-next": "^16.0.0",
|
||||
"typescript": "^5.9.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
export type WorkflowStageId =
|
||||
| "uploaded"
|
||||
| "region_selection"
|
||||
| "plan_review"
|
||||
| "blockout"
|
||||
| "style_brief"
|
||||
| "direction_selection"
|
||||
| "render_review"
|
||||
| "editing"
|
||||
| "completed";
|
||||
|
||||
export interface WorkflowStage {
|
||||
id: WorkflowStageId;
|
||||
label: string;
|
||||
detail: string;
|
||||
status: "complete" | "active" | "pending";
|
||||
}
|
||||
|
||||
export interface PlanLayer {
|
||||
id: string;
|
||||
label: string;
|
||||
visible: boolean;
|
||||
count?: number;
|
||||
}
|
||||
|
||||
export interface StyleDirection {
|
||||
id: string;
|
||||
name: string;
|
||||
summary: string;
|
||||
colors: string[];
|
||||
materials: string[];
|
||||
}
|
||||
|
||||
export interface ChatMessage {
|
||||
id: string;
|
||||
role: "assistant" | "user";
|
||||
body: string;
|
||||
meta?: string;
|
||||
}
|
||||
Reference in New Issue
Block a user