your-ai-workflow-firebase-os 2.0.2 → 2.0.3

package/dist/ThemeAdmin-BzFjJkLg.js

@@ -0,0 +1,269 @@
+import { a as e, i as t, o as n, r, t as i } from "./PageTitle-D93YCiN8.js";
+import { _ as a, b as o, o as s, sr as c, w as l, x as u } from "./TimeZoneField-DkI1Bkcz.js";
+import { t as d, w as f } from "./DashboardNav-Dmn7PVSp.js";
+import { L as p } from "./lucide-react-CA7GD7Nv.js";
+import { t as m } from "./ConfirmModal-gKQEpd4d.js";
+import { t as h } from "./SupportBar-CN_JGC-9.js";
+import { useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { Link as y } from "react-router-dom";
+//#region src/pages/ThemeAdmin.tsx
+var b = "fbos_theme_ai_draft", x = b, S = () => {
+	try {
+		return JSON.parse(localStorage.getItem(x) || "{}");
+	} catch {
+		return {};
+	}
+}, C = (e) => {
+	let t = String(e?.defaultTheme || "").trim();
+	return t === "light" || t === "dark" ? t : null;
+}, w = "My logo is attached to this message as a picture. Read the colours straight out of that picture and build this look from them — that is what matching my logo means. If no picture reached you, say so and ask me for it, rather than picking colours of your own.", T = "Do it all in one file: src/your-ai-workflow-firebase-os/configs/theme.config.ts — the colours, the typefaces and how rounded things are. Do not restyle by rewriting components, and do not put colours or a font of your own anywhere else.", E = "Choose the typefaces too, in the same file: fonts: { display, body } — a display face for the headings and a body face for everything else, each a Google Fonts family name spelled exactly as Google Fonts spells it, since the app loads it from there. Pick them for THIS brief the way you picked the colours: a luxury label, a playful shop and a law firm do not share a face, and the pair should look chosen together — the display face may be a serif, a slab, a geometric or a light grotesque, whatever the brief is about, while the body face stays easy to read at small sizes in both modes. Leaving fonts empty gives Inter, the face the app shipped in, which is the one choice that looks like no design at all.", D = "Use every colour the picture has, not just one. The accent is the one that stands out most — never one close to the accent the file holds now, so the change is plain to see — and the others go into the button fade, the heading gradient, the notification dot, the tint behind panels and the highlight behind selected text. Even the two backgrounds carry a faint wash of the logo instead of plain white or black. Read the exact shades off the picture; do not round them to the nearest colour you already know.", O = "Mix a palette of your own for this brief — more than one colour. The accent is the colour my brief is most about — the one its words and its mood lead with, not simply the loudest, and never one close to the accent the file holds now, so the change is plain to see — and the others go into the button fade, the heading gradient, the notification dot, the tint behind panels and the highlight behind selected text. Even the two backgrounds carry a faint wash of the palette instead of plain white or black.", k = "Be as bold as my brief allows and decide everything yourself: this is your design, and a look that could pass for a default is the one thing I do not want. Mix each shade for this look. A swatch you know by heart from Tailwind, Material or any other stock palette — #38bdf8, #0f172a, #f8fafc and their kind — means you did not look, so mix your own instead. Keep text readable on its background in both modes.", A = "Every mode needs these five: background, backgroundSecondary, foreground, accent and buttonText. The other colours the file allows — the button fade and its hover, the quiet button, panel fill and edge, the focus glow, the notification dot, the heading gradient, and the highlight behind text someone selects together with the colour of that selected text — are yours to set wherever the look calls for them, and a colourful look wants the button fade, the heading gradient and the selection highlight at the least: selected text left in a colour from the look before is the first thing people notice. Where I have named a colour myself, use my exact value. Anything left in the file that you did not choose for this look, delete rather than keep: a colour left over from the look before is what makes a new theme come out wrong.", j = "A colour I ask for is set in the dark colours and the light colours both, and where I name one, use my exact value. If the change touches the accent, the highlight behind selected text follows it. Mix any new shade; never a stock swatch.", M = (e, t) => String(e || "").trim() === String(t || "").trim(), N = (e, t) => e === "light" || e === "dark" ? t.defaultTheme === e && t.showThemeToggle === !1 : e === "system" ? t.defaultTheme === "system" : !1, P = (e, t) => {
+	if (!t) return e;
+	let n = { ...e };
+	return M(e.appName, t.appName) && delete n.appName, M(e.logoUrl, t.logoUrl) && delete n.logoUrl, M(e.faviconUrl, t.faviconUrl) && delete n.faviconUrl, N(String(e.defaultTheme || "").trim(), t) && delete n.defaultTheme, n;
+}, F = "Before you tell me it is done, read the file back: if background, backgroundSecondary, foreground or accent is still the value it held when you started, in either mode, then you have not done what I asked — go and set it. And if every value you wrote is a stock swatch, you have not designed anything — go back and mix your own.", I = (e) => {
+	let t = C(e), n = "That is ten values at the least — five in dark, five in light — and every one of them changes: the colours in that file now are the look I am replacing, so a colour you leave where it is is the mistake I am trying to avoid.";
+	if (t) {
+		let e = t === "light" ? "dark" : "light";
+		return `My site is ${t} only, so the ${t} colours are the ones everyone sees — design those with the most care. Set the ${e} colours as well, the same look ${e === "dark" ? "at night" : "by day"}, since the file needs both. ${n}`;
+	}
+	return `Set the dark colours and the light colours both, so my site reads well either way — the same hues in both, dark mode being the same look at night, not a second palette. ${n}`;
+}, L = (e) => {
+	let t = String(e?.brief || "").trim(), n = String(e?.logoUrl || "").trim() !== "";
+	return [...[
+		`Design the look of my whole app. Here is what I am after: ${t || "___"}`,
+		...n ? [w] : [],
+		T,
+		I(e),
+		n ? D : O,
+		k,
+		E,
+		A,
+		...V(e),
+		F
+	], ...H].join("\n");
+}, R = (e, t) => {
+	let n = String(e?.changes || "").trim(), r = P(e || {}, t);
+	return [...[
+		"My app already has a look I am happy with, in one file: src/your-ai-workflow-firebase-os/configs/theme.config.ts.",
+		"Change that one file, and change only what I ask for below — everything else in it stays exactly as it is: how rounded things are, fonts (unless my words are about the type), and every colour I have not mentioned. Do not tidy up, rebalance or improve anything I did not ask about, or restyle by rewriting components.",
+		j,
+		`Here is what I would like changed: ${n || "___"}`,
+		...V(r, "change")
+	], ...H].join("\n");
+}, z = (e) => {
+	let t = String(e?.defaultTheme || "").trim();
+	return t === "light" || t === "dark" ? `In that same file, set defaultTheme to '${t}' and showThemeToggle to false: my site is ${t} only, and visitors get no switch.` : t === "system" ? "In that same file, set defaultTheme to 'system', so my site opens in whichever mode the visitor's device already uses, and leave showThemeToggle as it is." : "Leave defaultTheme exactly as it is — how my site opens is not part of this job, and changing it is not a redesign.";
+}, B = "The empty space round that picture has already been cut away, and the top bar shows it whole, sized to the bar. Wherever you draw it yourself, size and place it as you see fit — but always the whole picture (fit=\"contain\"), never cropped, never padded out, never redrawn and never with any part of it cut off.", V = (e, t = "design") => {
+	let n = String(e?.appName || "").trim(), r = String(e?.logoUrl || "").trim(), i = String(e?.faviconUrl || "").trim(), a = [
+		"light",
+		"dark",
+		"system"
+	].includes(String(e?.defaultTheme || "").trim()), o = a || t === "design" ? [z(e)] : [];
+	if (n && o.push(`In that same file, set appName to exactly: ${n}`), r && (o.push(`In that same file, set logoUrl to exactly this link: ${r} — that is my logo for the top bar. Use my link character for character, and never swap it for a placeholder or a picture of your own.`), o.push(B)), i && o.push(i === r ? "Set faviconUrl to that same link — it is my browser tab icon too." : `In that same file, set faviconUrl to exactly this link: ${i} — that is my browser tab icon. Use my link character for character.`), t === "change") {
+		let e = [
+			...r ? [] : ["logoUrl"],
+			...i ? [] : ["faviconUrl"],
+			...n ? [] : ["appName"],
+			...a ? [] : ["defaultTheme and showThemeToggle"]
+		];
+		if (e.length) {
+			let t = e.length > 1 ? `${e.slice(0, -1).join(", ")} and ${e[e.length - 1]}` : e[0];
+			o.push(`Leave ${t} exactly as they are — not part of this change.`);
+		}
+		return o;
+	}
+	return !r && !i ? o.push("Leave logoUrl and faviconUrl exactly as they are. The logo and the browser tab icon are mine, and my Theme screen is the only place they change.") : r ? i || o.push("Leave faviconUrl exactly as it is — my browser tab icon is mine, and my Theme screen is the only place it changes.") : o.push("Leave logoUrl exactly as it is — my logo is mine, and my Theme screen is the only place it changes."), o;
+}, H = ["Tell me what you picked and why, in one short paragraph."], U = (e, t = "design") => t === "change" ? String(e?.changes || "").trim() ? "" : "Say what you would like changed, and this sentence is ready to copy." : String(e?.brief || "").trim() ? "" : "Say what look you are after, and this sentence is ready to copy.";
+function W() {
+	let { activeConfig: b } = f(), [C, w] = g(S), [T, E] = g(() => S().mode === "change" ? "change" : "design"), D = (e) => {
+		E(e), w((t) => {
+			let n = { ...t };
+			e === "change" ? n.mode = "change" : delete n.mode;
+			try {
+				localStorage.setItem(x, JSON.stringify(n));
+			} catch {}
+			return n;
+		});
+	}, O = (e, t) => w((n) => {
+		let r = {
+			...n,
+			[e]: t
+		};
+		try {
+			localStorage.setItem(x, JSON.stringify(r));
+		} catch {}
+		return r;
+	}), [k, A] = g(!1), [j, M] = g(null), [N, P] = g(0), F = (e) => P((t) => Math.max(0, t + (e ? 1 : -1))), I = () => {
+		A(!0);
+		try {
+			localStorage.removeItem(x), localStorage.removeItem("theme-mode"), localStorage.removeItem("last-seen-default-theme"), localStorage.removeItem("theme_saved_cache");
+		} catch {}
+		w({}), E("design"), setTimeout(() => A(!1), 600);
+	};
+	return /* @__PURE__ */ v("main", {
+		className: "flex-1 w-full max-w-7xl mx-auto p-4 pt-2 md:p-8 md:pt-4 z-10 flex flex-col min-h-screen",
+		children: [
+			/* @__PURE__ */ v(c.div, {
+				initial: {
+					opacity: 0,
+					y: 20
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				className: "mb-6",
+				children: [/* @__PURE__ */ _(i, { children: "Theme" }), /* @__PURE__ */ v("div", {
+					className: "flex items-center gap-2 text-foreground/40 font-bold uppercase tracking-[0.2em] text-[11px]",
+					children: [/* @__PURE__ */ _("span", { className: "w-8 h-[1px] bg-foreground/10" }), "/theme"]
+				})]
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "flex flex-col gap-6 flex-1 pb-16",
+				children: [/* @__PURE__ */ _(d, {}), /* @__PURE__ */ _("div", {
+					className: "glass-panel border border-[var(--panel-border)] rounded-3xl p-4 sm:p-5 md:p-8 shadow-2xl relative bg-background flex flex-col fbos-tab-fill",
+					children: /* @__PURE__ */ v("div", {
+						className: "flex flex-col gap-5",
+						children: [
+							/* @__PURE__ */ v("div", {
+								className: "flex items-start justify-between gap-3",
+								children: [/* @__PURE__ */ v("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ _("h2", {
+										className: "text-[17px] sm:text-xl font-bold text-foreground tracking-tight",
+										children: T === "change" ? "Change it with your assistant" : "Design it with your assistant"
+									}), /* @__PURE__ */ v("p", {
+										className: "text-[12.5px] sm:text-[13.5px] font-medium text-foreground/55 mt-1 sm:mt-1.5",
+										children: [/* @__PURE__ */ _("span", {
+											className: "sm:hidden",
+											children: "Fill these in for your assistant."
+										}), /* @__PURE__ */ _("span", {
+											className: "max-sm:hidden",
+											children: T === "change" ? "Say what to change, then copy the sentence below into your assistant’s chat. Nothing you do not mention is touched." : "Fill these in, then copy the sentence below into your assistant’s chat. It designs the whole look — colours, corners, logo — and there is nothing to set by hand."
+										})]
+									})]
+								}), /* @__PURE__ */ v("div", {
+									className: "shrink-0 flex items-center gap-2",
+									children: [/* @__PURE__ */ _(l, {
+										to: "/",
+										title: "View your app",
+										children: "View app"
+									}), /* @__PURE__ */ _(s, {
+										icon: p,
+										tone: "danger",
+										compact: !0,
+										busy: k,
+										title: "Start the whole look again",
+										onClick: () => M({
+											title: "Start the whole look again?",
+											message: "Your answers here clear and the sentence goes back to designing the whole look. Your theme file is not touched — copy the new sentence to your assistant to change it.",
+											apply: I
+										}),
+										children: "Start again"
+									})]
+								})]
+							}),
+							/* @__PURE__ */ _(e, {
+								label: "Logo",
+								hint: "The picture in the top bar. Attach this same picture in your assistant's chat — it cannot open the link, and the picture is where the colours come from.",
+								value: C.logoUrl || "",
+								onChange: (e) => O("logoUrl", e),
+								tips: t,
+								whole: !0,
+								trim: !0,
+								onBusyChange: F
+							}),
+							/* @__PURE__ */ _(e, {
+								label: "Browser tab icon",
+								hint: "The tiny picture on the browser tab.",
+								value: C.faviconUrl || "",
+								onChange: (e) => O("faviconUrl", e),
+								tips: r,
+								whole: !0,
+								onBusyChange: F
+							}),
+							/* @__PURE__ */ _(u, {
+								label: "App name",
+								hint: "It goes in the top bar and on the browser tab.",
+								value: C.appName || "",
+								onChange: (e) => O("appName", e),
+								placeholder: "Bright Studio"
+							}),
+							/* @__PURE__ */ _(a, {
+								label: "Light or dark",
+								hint: "Which one your app opens in. Always light or always dark means that one mode and no switch for visitors; otherwise whichever the visitor already uses on their device, with a switch.",
+								value: C.defaultTheme || "",
+								onChange: (e) => O("defaultTheme", e),
+								placeholder: "Leave it as it is",
+								options: [
+									{
+										value: "system",
+										label: "Whatever their device uses"
+									},
+									{
+										value: "light",
+										label: "Always light"
+									},
+									{
+										value: "dark",
+										label: "Always dark"
+									}
+								]
+							}),
+							T === "change" ? /* @__PURE__ */ _(o, {
+								label: "What would you like changed?",
+								hint: "Name just the parts you want moved. Everything else stays as it is.",
+								value: C.changes || "",
+								onChange: (e) => O("changes", e),
+								placeholder: "Make the buttons a softer green, and warm up the page background a little. Leave the cards as they are."
+							}) : /* @__PURE__ */ _(o, {
+								label: "What look would you like?",
+								hint: "What you do, who it is for, and the feeling you are after. Your assistant designs the rest — the more feeling you give it, the further it goes.",
+								value: C.brief || "",
+								onChange: (e) => O("brief", e),
+								placeholder: "A calm, modern look for a small physiotherapy clinic. Soft greens, lots of white space, nothing shouty. Rounded corners."
+							}),
+							/* @__PURE__ */ _(n, {
+								title: "Copy this to your assistant",
+								prompt: T === "change" ? R(C, b) : L(C),
+								locked: !!U(C, T),
+								busy: N > 0,
+								onCopied: T === "change" ? void 0 : () => D("change")
+							}),
+							/* @__PURE__ */ v("p", {
+								className: "text-[11.5px] text-foreground/45 font-medium leading-snug px-1",
+								children: [
+									"That sentence is the only way the look changes — there is nothing to set by hand here. Uploads are kept on your",
+									" ",
+									/* @__PURE__ */ _(y, {
+										to: "/assets",
+										className: "text-accent font-bold hover:underline",
+										children: "Assets page"
+									}),
+									" ",
+									"too; edit the fields and copy the sentence again any time."
+								]
+							})
+						]
+					})
+				})]
+			}),
+			/* @__PURE__ */ _(h, {}),
+			/* @__PURE__ */ _(m, {
+				isOpen: !!j,
+				title: j?.title || "",
+				message: j?.message || "",
+				confirmText: "Start again",
+				cancelText: "Keep it",
+				isProcessing: k,
+				onCancel: () => M(null),
+				onConfirm: () => {
+					j?.apply(), M(null);
+				}
+			})
+		]
+	});
+}
+//#endregion
+export { U as a, R as i, b as n, L as o, W as r, B as t };

package/dist/ThemeAdmin-DVnPNxe7.cjs

@@ -0,0 +1 @@
+require(`./chunk-CiTBaPhY.cjs`);const e=require(`./ThemeAdmin-DY7Vc4Sj.cjs`);exports.ThemeAdmin=e.r;

package/dist/ThemeAdmin-DY7Vc4Sj.cjs

@@ -0,0 +1,3 @@
+const e=require(`./chunk-CiTBaPhY.cjs`),t=require(`./PageTitle-CZhgmmDT.cjs`),n=require(`./TimeZoneField-qs7NPR30.cjs`),r=require(`./DashboardNav-CXa_ci-_.cjs`),i=require(`./lucide-react-BwV6L6Is.cjs`),a=require(`./ConfirmModal-Di9GR-vV.cjs`),o=require(`./SupportBar-CDT0HwdP.cjs`);let s=require(`react`);s=e.a(s,1);let c=require(`react/jsx-runtime`),l=require(`react-router-dom`);var u=`fbos_theme_ai_draft`,d=u,f=()=>{try{return JSON.parse(localStorage.getItem(d)||`{}`)}catch{return{}}},p=e=>{let t=String(e?.defaultTheme||``).trim();return t===`light`||t===`dark`?t:null},m=`My logo is attached to this message as a picture. Read the colours straight out of that picture and build this look from them — that is what matching my logo means. If no picture reached you, say so and ask me for it, rather than picking colours of your own.`,h=`Do it all in one file: src/your-ai-workflow-firebase-os/configs/theme.config.ts — the colours, the typefaces and how rounded things are. Do not restyle by rewriting components, and do not put colours or a font of your own anywhere else.`,g=`Choose the typefaces too, in the same file: fonts: { display, body } — a display face for the headings and a body face for everything else, each a Google Fonts family name spelled exactly as Google Fonts spells it, since the app loads it from there. Pick them for THIS brief the way you picked the colours: a luxury label, a playful shop and a law firm do not share a face, and the pair should look chosen together — the display face may be a serif, a slab, a geometric or a light grotesque, whatever the brief is about, while the body face stays easy to read at small sizes in both modes. Leaving fonts empty gives Inter, the face the app shipped in, which is the one choice that looks like no design at all.`,_=`Use every colour the picture has, not just one. The accent is the one that stands out most — never one close to the accent the file holds now, so the change is plain to see — and the others go into the button fade, the heading gradient, the notification dot, the tint behind panels and the highlight behind selected text. Even the two backgrounds carry a faint wash of the logo instead of plain white or black. Read the exact shades off the picture; do not round them to the nearest colour you already know.`,v=`Mix a palette of your own for this brief — more than one colour. The accent is the colour my brief is most about — the one its words and its mood lead with, not simply the loudest, and never one close to the accent the file holds now, so the change is plain to see — and the others go into the button fade, the heading gradient, the notification dot, the tint behind panels and the highlight behind selected text. Even the two backgrounds carry a faint wash of the palette instead of plain white or black.`,y=`Be as bold as my brief allows and decide everything yourself: this is your design, and a look that could pass for a default is the one thing I do not want. Mix each shade for this look. A swatch you know by heart from Tailwind, Material or any other stock palette — #38bdf8, #0f172a, #f8fafc and their kind — means you did not look, so mix your own instead. Keep text readable on its background in both modes.`,b=`Every mode needs these five: background, backgroundSecondary, foreground, accent and buttonText. The other colours the file allows — the button fade and its hover, the quiet button, panel fill and edge, the focus glow, the notification dot, the heading gradient, and the highlight behind text someone selects together with the colour of that selected text — are yours to set wherever the look calls for them, and a colourful look wants the button fade, the heading gradient and the selection highlight at the least: selected text left in a colour from the look before is the first thing people notice. Where I have named a colour myself, use my exact value. Anything left in the file that you did not choose for this look, delete rather than keep: a colour left over from the look before is what makes a new theme come out wrong.`,x=`A colour I ask for is set in the dark colours and the light colours both, and where I name one, use my exact value. If the change touches the accent, the highlight behind selected text follows it. Mix any new shade; never a stock swatch.`,S=(e,t)=>String(e||``).trim()===String(t||``).trim(),C=(e,t)=>e===`light`||e===`dark`?t.defaultTheme===e&&t.showThemeToggle===!1:e===`system`?t.defaultTheme===`system`:!1,w=(e,t)=>{if(!t)return e;let n={...e};return S(e.appName,t.appName)&&delete n.appName,S(e.logoUrl,t.logoUrl)&&delete n.logoUrl,S(e.faviconUrl,t.faviconUrl)&&delete n.faviconUrl,C(String(e.defaultTheme||``).trim(),t)&&delete n.defaultTheme,n},T=`Before you tell me it is done, read the file back: if background, backgroundSecondary, foreground or accent is still the value it held when you started, in either mode, then you have not done what I asked — go and set it. And if every value you wrote is a stock swatch, you have not designed anything — go back and mix your own.`,E=e=>{let t=p(e),n=`That is ten values at the least — five in dark, five in light — and every one of them changes: the colours in that file now are the look I am replacing, so a colour you leave where it is is the mistake I am trying to avoid.`;if(t){let e=t===`light`?`dark`:`light`;return`My site is ${t} only, so the ${t} colours are the ones everyone sees — design those with the most care. Set the ${e} colours as well, the same look ${e===`dark`?`at night`:`by day`}, since the file needs both. ${n}`}return`Set the dark colours and the light colours both, so my site reads well either way — the same hues in both, dark mode being the same look at night, not a second palette. ${n}`},D=e=>{let t=String(e?.brief||``).trim(),n=String(e?.logoUrl||``).trim()!==``;return[...[`Design the look of my whole app. Here is what I am after: ${t||`___`}`,...n?[m]:[],h,E(e),n?_:v,y,g,b,...j(e),T],...M].join(`
+`)},O=(e,t)=>{let n=String(e?.changes||``).trim(),r=w(e||{},t);return[...[`My app already has a look I am happy with, in one file: src/your-ai-workflow-firebase-os/configs/theme.config.ts.`,`Change that one file, and change only what I ask for below — everything else in it stays exactly as it is: how rounded things are, fonts (unless my words are about the type), and every colour I have not mentioned. Do not tidy up, rebalance or improve anything I did not ask about, or restyle by rewriting components.`,x,`Here is what I would like changed: ${n||`___`}`,...j(r,`change`)],...M].join(`
+`)},k=e=>{let t=String(e?.defaultTheme||``).trim();return t===`light`||t===`dark`?`In that same file, set defaultTheme to '${t}' and showThemeToggle to false: my site is ${t} only, and visitors get no switch.`:t===`system`?`In that same file, set defaultTheme to 'system', so my site opens in whichever mode the visitor's device already uses, and leave showThemeToggle as it is.`:`Leave defaultTheme exactly as it is — how my site opens is not part of this job, and changing it is not a redesign.`},A=`The empty space round that picture has already been cut away, and the top bar shows it whole, sized to the bar. Wherever you draw it yourself, size and place it as you see fit — but always the whole picture (fit="contain"), never cropped, never padded out, never redrawn and never with any part of it cut off.`,j=(e,t=`design`)=>{let n=String(e?.appName||``).trim(),r=String(e?.logoUrl||``).trim(),i=String(e?.faviconUrl||``).trim(),a=[`light`,`dark`,`system`].includes(String(e?.defaultTheme||``).trim()),o=a||t===`design`?[k(e)]:[];if(n&&o.push(`In that same file, set appName to exactly: ${n}`),r&&(o.push(`In that same file, set logoUrl to exactly this link: ${r} — that is my logo for the top bar. Use my link character for character, and never swap it for a placeholder or a picture of your own.`),o.push(A)),i&&o.push(i===r?`Set faviconUrl to that same link — it is my browser tab icon too.`:`In that same file, set faviconUrl to exactly this link: ${i} — that is my browser tab icon. Use my link character for character.`),t===`change`){let e=[...r?[]:[`logoUrl`],...i?[]:[`faviconUrl`],...n?[]:[`appName`],...a?[]:[`defaultTheme and showThemeToggle`]];if(e.length){let t=e.length>1?`${e.slice(0,-1).join(`, `)} and ${e[e.length-1]}`:e[0];o.push(`Leave ${t} exactly as they are — not part of this change.`)}return o}return!r&&!i?o.push(`Leave logoUrl and faviconUrl exactly as they are. The logo and the browser tab icon are mine, and my Theme screen is the only place they change.`):r?i||o.push(`Leave faviconUrl exactly as it is — my browser tab icon is mine, and my Theme screen is the only place it changes.`):o.push(`Leave logoUrl exactly as it is — my logo is mine, and my Theme screen is the only place it changes.`),o},M=[`Tell me what you picked and why, in one short paragraph.`],N=(e,t=`design`)=>t===`change`?String(e?.changes||``).trim()?``:`Say what you would like changed, and this sentence is ready to copy.`:String(e?.brief||``).trim()?``:`Say what look you are after, and this sentence is ready to copy.`;function P(){let{activeConfig:e}=r.w(),[u,p]=(0,s.useState)(f),[m,h]=(0,s.useState)(()=>f().mode===`change`?`change`:`design`),g=e=>{h(e),p(t=>{let n={...t};e===`change`?n.mode=`change`:delete n.mode;try{localStorage.setItem(d,JSON.stringify(n))}catch{}return n})},_=(e,t)=>p(n=>{let r={...n,[e]:t};try{localStorage.setItem(d,JSON.stringify(r))}catch{}return r}),[v,y]=(0,s.useState)(!1),[b,x]=(0,s.useState)(null),[S,C]=(0,s.useState)(0),w=e=>C(t=>Math.max(0,t+(e?1:-1))),T=()=>{y(!0);try{localStorage.removeItem(d),localStorage.removeItem(`theme-mode`),localStorage.removeItem(`last-seen-default-theme`),localStorage.removeItem(`theme_saved_cache`)}catch{}p({}),h(`design`),setTimeout(()=>y(!1),600)};return(0,c.jsxs)(`main`,{className:`flex-1 w-full max-w-7xl mx-auto p-4 pt-2 md:p-8 md:pt-4 z-10 flex flex-col min-h-screen`,children:[(0,c.jsxs)(n.sr.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},className:`mb-6`,children:[(0,c.jsx)(t.t,{children:`Theme`}),(0,c.jsxs)(`div`,{className:`flex items-center gap-2 text-foreground/40 font-bold uppercase tracking-[0.2em] text-[11px]`,children:[(0,c.jsx)(`span`,{className:`w-8 h-[1px] bg-foreground/10`}),`/theme`]})]}),(0,c.jsxs)(`div`,{className:`flex flex-col gap-6 flex-1 pb-16`,children:[(0,c.jsx)(r.t,{}),(0,c.jsx)(`div`,{className:`glass-panel border border-[var(--panel-border)] rounded-3xl p-4 sm:p-5 md:p-8 shadow-2xl relative bg-background flex flex-col fbos-tab-fill`,children:(0,c.jsxs)(`div`,{className:`flex flex-col gap-5`,children:[(0,c.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,c.jsxs)(`div`,{className:`min-w-0`,children:[(0,c.jsx)(`h2`,{className:`text-[17px] sm:text-xl font-bold text-foreground tracking-tight`,children:m===`change`?`Change it with your assistant`:`Design it with your assistant`}),(0,c.jsxs)(`p`,{className:`text-[12.5px] sm:text-[13.5px] font-medium text-foreground/55 mt-1 sm:mt-1.5`,children:[(0,c.jsx)(`span`,{className:`sm:hidden`,children:`Fill these in for your assistant.`}),(0,c.jsx)(`span`,{className:`max-sm:hidden`,children:m===`change`?`Say what to change, then copy the sentence below into your assistant’s chat. Nothing you do not mention is touched.`:`Fill these in, then copy the sentence below into your assistant’s chat. It designs the whole look — colours, corners, logo — and there is nothing to set by hand.`})]})]}),(0,c.jsxs)(`div`,{className:`shrink-0 flex items-center gap-2`,children:[(0,c.jsx)(n.w,{to:`/`,title:`View your app`,children:`View app`}),(0,c.jsx)(n.o,{icon:i.L,tone:`danger`,compact:!0,busy:v,title:`Start the whole look again`,onClick:()=>x({title:`Start the whole look again?`,message:`Your answers here clear and the sentence goes back to designing the whole look. Your theme file is not touched — copy the new sentence to your assistant to change it.`,apply:T}),children:`Start again`})]})]}),(0,c.jsx)(t.a,{label:`Logo`,hint:`The picture in the top bar. Attach this same picture in your assistant's chat — it cannot open the link, and the picture is where the colours come from.`,value:u.logoUrl||``,onChange:e=>_(`logoUrl`,e),tips:t.i,whole:!0,trim:!0,onBusyChange:w}),(0,c.jsx)(t.a,{label:`Browser tab icon`,hint:`The tiny picture on the browser tab.`,value:u.faviconUrl||``,onChange:e=>_(`faviconUrl`,e),tips:t.r,whole:!0,onBusyChange:w}),(0,c.jsx)(n.x,{label:`App name`,hint:`It goes in the top bar and on the browser tab.`,value:u.appName||``,onChange:e=>_(`appName`,e),placeholder:`Bright Studio`}),(0,c.jsx)(n._,{label:`Light or dark`,hint:`Which one your app opens in. Always light or always dark means that one mode and no switch for visitors; otherwise whichever the visitor already uses on their device, with a switch.`,value:u.defaultTheme||``,onChange:e=>_(`defaultTheme`,e),placeholder:`Leave it as it is`,options:[{value:`system`,label:`Whatever their device uses`},{value:`light`,label:`Always light`},{value:`dark`,label:`Always dark`}]}),m===`change`?(0,c.jsx)(n.b,{label:`What would you like changed?`,hint:`Name just the parts you want moved. Everything else stays as it is.`,value:u.changes||``,onChange:e=>_(`changes`,e),placeholder:`Make the buttons a softer green, and warm up the page background a little. Leave the cards as they are.`}):(0,c.jsx)(n.b,{label:`What look would you like?`,hint:`What you do, who it is for, and the feeling you are after. Your assistant designs the rest — the more feeling you give it, the further it goes.`,value:u.brief||``,onChange:e=>_(`brief`,e),placeholder:`A calm, modern look for a small physiotherapy clinic. Soft greens, lots of white space, nothing shouty. Rounded corners.`}),(0,c.jsx)(t.o,{title:`Copy this to your assistant`,prompt:m===`change`?O(u,e):D(u),locked:!!N(u,m),busy:S>0,onCopied:m===`change`?void 0:()=>g(`change`)}),(0,c.jsxs)(`p`,{className:`text-[11.5px] text-foreground/45 font-medium leading-snug px-1`,children:[`That sentence is the only way the look changes — there is nothing to set by hand here. Uploads are kept on your`,` `,(0,c.jsx)(l.Link,{to:`/assets`,className:`text-accent font-bold hover:underline`,children:`Assets page`}),` `,`too; edit the fields and copy the sentence again any time.`]})]})})]}),(0,c.jsx)(o.t,{}),(0,c.jsx)(a.t,{isOpen:!!b,title:b?.title||``,message:b?.message||``,confirmText:`Start again`,cancelText:`Keep it`,isProcessing:v,onCancel:()=>x(null),onConfirm:()=>{b?.apply(),x(null)}})]})}Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return N}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return P}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return A}});

package/dist/ThemeAdmin-DnC-D2N3.js

@@ -0,0 +1,2 @@
+import { r as e } from "./ThemeAdmin-BzFjJkLg.js";
+export { e as ThemeAdmin };