/* ============================================================
SVLM — shared UI kit: icons, buttons, chips, tiles, image slots
Ported verbatim from the Claude Design project (app/ui.jsx) — pure
presentation, no mock-data dependency, so no adaptation needed.
============================================================ */
const P = window.PALETTE;
const S = window.SHAPE;
const SH = window.SHADOW;
/* ---- Type scale, resolved per language.
window.typeFor gives Thai its own line-heights and drops the design's negative tracking; see the
note beside TYPE_LATIN in data-adapter.js for why that is not optional. ---- */
function txt(scale, lang, extra) {
return Object.assign({}, window.typeFor(scale, lang), extra || {});
}
/* ---- Viewport class.
The reference kit is a 375px phone design. On a desktop browser the same layout stranded in a
480px column wastes the screen, so the shell asks this hook whether it may spread out. Declared
with React.useState rather than a destructured useState because ui.jsx loads before app.jsx,
where that destructuring lives. ---- */
function useIsDesktop(min = 900) {
const query = '(min-width: ' + min + 'px)';
const [wide, setWide] = React.useState(
() => typeof window.matchMedia === 'function' && window.matchMedia(query).matches
);
React.useEffect(() => {
if (typeof window.matchMedia !== 'function') return undefined;
const mq = window.matchMedia(query);
const onChange = (e) => setWide(e.matches);
setWide(mq.matches);
mq.addEventListener('change', onChange);
return () => mq.removeEventListener('change', onChange);
}, [query]);
return wide;
}
/* ---- Minimal line icons (stroke-based, single-weight) ---- */
function Icon({ name, size = 24, color = 'currentColor', sw = 1.8, fill = 'none' }) {
const common = { width: size, height: size, viewBox: '0 0 24 24', fill, stroke: color,
strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' };
const paths = {
sparkle: <>,
shield: <>,
key: <>,
snow: <>,
bug: <>,
wrench: ,
drop: ,
bolt: ,
roller: <>,
box: <>,
home: <>,
grid: <>,
cal: <>,
user: <>,
cart: <>,
clock: <>,
pin: <>,
star: ,
check: ,
chevR: ,
chevL: ,
chevD: ,
plus: ,
minus: ,
x: ,
phone: ,
nav: ,
bell: <>,
trash: <>,
archive: <>,
search: <>,
wallet: <>,
promo: <>,
globe: <>,
chat: ,
edit: ,
logout: <>,
repeat: ,
badge: <>,
sofa: <>,
bed: <>,
carpet: <>,
building: <>,
tank: <>,
washer: <>,
flame: ,
camera: <>,
tv: <>,
curtain: <>,
umbrella: <>,
spray: <>,
plant: <>,
truck: <>,
fridge: <>,
share: <>,
facebook: <>,
instagram: <>,
tiktok: ,
};
return ;
}
/* ---- Striped image placeholder (used only where no real photo is set) ---- */
function Shot({ label, h = 150, r = 18, tone = 'blue', style = {} }) {
const tones = {
blue: ['#fde4c8', '#f9d3a8', '#cf8a33'],
navy: ['#eaddca', '#dcc7ab', '#8a6336'],
mint: ['#d3efe6', '#bfe6d8', '#2f9a7c'],
};
const [c1, c2, tx] = tones[tone] || tones.blue;
return (
{label && {label}}
);
}
/* ---- Share a link via the OS share sheet (Facebook/LINE/IG/TikTok all appear there on a real
phone) — Web Share API level 1, so no per-platform share-URL wiring needed. Falls back to
clipboard on desktop browsers that don't support navigator.share (e.g. most desktop Chrome/
Firefox) — returns 'copied' so the caller can show its own confirmation toast/alert. ---- */
async function shareLink(url, title, text) {
if (navigator.share) {
try { await navigator.share({ title, text, url }); return 'shared'; }
catch (e) { return e.name === 'AbortError' ? 'cancelled' : 'failed'; }
}
try { await navigator.clipboard.writeText(url); return 'copied'; }
catch (e) { return 'failed'; }
}
/* ---- Real photo, falling back to Shot when a service/product has none uploaded ---- */
function Photo({ src, label, h = 150, r = 18, tone = 'blue', style = {} }) {
if (!src) return ;
return ;
}
/* ---- Service glyph tile (rounded square w/ icon) ---- */
function SvcTile({ name, size = 52, on = false }) {
return (
);
}
/* ---- Button ---- */
function Btn({ children, onClick, variant = 'primary', size = 'lg', disabled, style = {}, icon }) {
const base = {
border: 'none', borderRadius: 16, cursor: disabled ? 'default' : 'pointer',
fontFamily: 'inherit', fontWeight: 700, display: 'inline-flex', alignItems: 'center',
justifyContent: 'center', gap: 8, width: '100%', transition: 'transform .08s, filter .15s',
opacity: disabled ? 0.45 : 1, WebkitTapHighlightColor: 'transparent',
};
const sizes = { lg: { height: 54, fontSize: 16.5 }, md: { height: 46, fontSize: 15 }, sm: { height: 38, fontSize: 13.5, borderRadius: 12, width: 'auto', padding: '0 16px' } };
const variants = {
primary: { background: P.primary, color: '#fff', boxShadow: '0 8px 20px rgba(238,123,22,0.30)' },
dark: { background: P.navy, color: '#fff' },
mint: { background: P.mint, color: '#fff', boxShadow: '0 8px 20px rgba(15,163,127,0.26)' },
soft: { background: P.tintBlue, color: P.primary, boxShadow: 'none' },
ghost: { background: '#fff', color: P.ink, border: `1.5px solid ${P.line}`, boxShadow: 'none' },
};
return (
);
}
/* ---- Price with an optional crossed-out "was" price — storewide sale campaign display
(Ops -> Services/Products -> "Storewide sale"). `original` is the pre-sale price, already
VAT-inclusive, or null/undefined when nothing is on sale for this row. ---- */
function PriceTag({ price, original, size = 'md' }) {
const big = size === 'lg';
return (
{original && original > price && (
{baht(original)}
)}
{baht(price)}
);
}
/* ---- "From ฿x", or the reason there is no list price ----
A transport-priced service (Move House) has no price of its own — the whole charge is the
vehicle/distance fee worked out once the customer enters their addresses. Rendering the raw
"From ฿0" there reads as free, so these show what actually sets the price instead. Used
everywhere a service price appears, so the catalogue, the category grid and the share text can't
disagree with each other. */
function isTransportPriced(s) {
return !!(s && s.deliveryMode) && Number(s.from ?? 0) === 0;
}
function ServicePrice({ app, s, size = 'md' }) {
if (isTransportPriced(s)) {
return (
{app.t('price_by_distance') || 'Priced by distance'}
);
}
return (
<>
{app.t('from_price') || 'From'}
);
}
/* ---- Small star rating row ---- */
function Stars({ value, jobs, size = 13 }) {
return (
{value}
{jobs && ({jobs})}
);
}
/* ---- Pill chip ---- */
function Chip({ children, on, onClick, style = {} }) {
return (
);
}
/* ---- Section header ---- */
function SectionHead({ title, action, onAction }) {
return (
);
}
/* ---- Sticky bottom action bar (above home indicator) ---- */
function BottomBar({ children }) {
return (
{children}
);
}
/* ---- Top app header (custom, replaces iOS nav) ---- */
function AppHeader({ left, title, sub, right, onBack, dark }) {
const tc = dark ? '#fff' : P.ink;
const sc = dark ? 'rgba(255,255,255,0.7)' : P.muted;
return (
{onBack && (
)}
{left}
{sub &&
{sub}
}
{title &&
{title}
}
{right}
);
}
/* ---- SVLM brand lockup.
The new mark spells SVLM inside the house shape, so setting the word beside it read the same four
letters twice at two different sizes, and squeezed the mark down to where its own lettering went
to mush. The mark now stands alone and takes the height the pair used to occupy. showText is kept
for anywhere a spelled-out wordmark is genuinely wanted. ---- */
function Logo({ h = 26, style = {} }) {
return ;
}
function Brand({ h = 30, dark = false, showText = false }) {
return (
{showText && SVLM}
);
}
/* ---- The dark band at the top of a screen, with the white content sheet riding over it.
This is the reference design's defining move: the brand colour owns the status-bar area and the
content sits on a sheet whose top corners are rounded into it. Ours is navy where theirs is
near-black. ---- */
function NavyTop({ children, sheet, lang }) {
return (
{children}
{sheet}
);
}
/* ---- Category card: a tinted panel with the icon in a paler disc and the label beneath.
The reference ships three of these across the top of the dashboard. ---- */
function CatCard({ icon, label, tone = 'orange', onClick, lang }) {
const tones = {
orange: { bg: '#fff1e2', disc: '#ffdfbd', ink: P.primary },
navy: { bg: '#eef3f9', disc: '#d9e5f3', ink: P.navy2 },
mint: { bg: '#e6f6f0', disc: '#c9eade', ink: P.mint },
rose: { bg: '#fdecec', disc: '#f9d5d5', ink: '#d23a3a' },
};
const c = tones[tone] || tones.orange;
return (
);
}
/* ---- Round service tile with an optional corner badge — the reference's "Other Services" row. ---- */
function RoundTile({ icon, label, tone = 'orange', badge, onClick, lang }) {
const tones = {
orange: { bg: '#fff1e2', ink: P.primary }, navy: { bg: '#eef3f9', ink: P.navy2 },
mint: { bg: '#e6f6f0', ink: P.mint }, rose: { bg: '#fdecec', ink: '#d23a3a' },
};
const c = tones[tone] || tones.orange;
return (
);
}
Object.assign(window, {
Icon, Shot, Photo, SvcTile, Btn, Stars, Chip, SectionHead, Card, BottomBar, AppHeader, Logo, Brand, PriceTag,
txt, useIsDesktop, NavyTop, CatCard, RoundTile,
});
;
}
function Brand({ h = 30, dark = false, showText = false }) {
return (