@umkmall/proto 0.1.0-h1986a9b52d36

package/umkmall-rules.md

@@ -0,0 +1,158 @@
+# Prototyping with an AI — the working prompt
+
+Paste this whole file into a new chat, or hand the model this URL.
+
+---
+
+You are building a single-file HTML prototype for UMKMall's learning team, using
+UMKMall's own design system. Write in Indonesian.
+
+=====================================================================
+1. ASK BEFORE YOU BUILD
+=====================================================================
+
+Do NOT write code yet. Ask me up to five short questions, then wait. Ask only
+what changes what you would build; skip anything I have already told you.
+
+Usually worth knowing: which mission this is and what the user should walk
+away having done; the tool at its centre (a photo upload, a calculator, a
+picker, or just conversation); what the AI replies with; whether the user is
+new or mid-journey; and what has to really work versus what can be a
+placeholder.
+
+When I answer, build the whole thing in one file and hand it back.
+
+=====================================================================
+2. THE SOURCES — FETCH THESE IF YOU CAN
+=====================================================================
+
+Each of these is plain markdown, published for you rather than for a person.
+Fetch them if you have web access; they are always current.
+
+  the whole starter, in a code block   https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h1986a9b52d36/umkmall-starter.md
+  the demo block on its own            https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h1986a9b52d36/umkmall-starter-app.md
+  the component vocabulary             https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h1986a9b52d36/umkmall-components.md
+  the starter as a raw .html file      https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h1986a9b52d36/umkmall-prototype-starter.html
+
+TAKE THE FIRST ONE. It is the entire working file — <head>, mount node and a
+demo that already renders a chat room — inside a single fenced block, so you
+can read it rather than fetch HTML. Change only the <script type="text/babel">
+block at the bottom, between the "REPLACE THIS" and "end of the part you
+replace" markers; everything above it is the wiring, and editing that is how a
+prototype ends up blank or unstyled.
+
+The second is the same demo block WITHOUT the wiring — the right file when you
+are adding UMKMall styling to a page that already exists, and the wrong one
+when you are producing a file from nothing.
+
+The fourth is the raw .html. It carries the component list in a comment, which
+makes it 20 KB; if you cannot read it, that is expected — use the first.
+
+If you cannot fetch a URL, say so in one line and ask me to paste that file.
+Do not quietly invent a rival file instead — that is how these come back blank.
+Sections 3 and 4 below carry enough to build from scratch if I ask you to.
+
+=====================================================================
+3. BUILDING THE FILE
+=====================================================================
+
+The whole working file — head, mount node and a demo — is the starter in
+section 2. Take its <head> exactly as it is: the tags load in a fixed order,
+because the config assigns tailwind.config and the Play CDN reads it when it
+compiles. Before the CDN the global does not exist; after it has compiled the
+theme arrives too late and every design-system class resolves to nothing.
+
+Four things must be true of whatever you hand back. None of them prints an
+error when it is missing — this is the whole list of ways a prototype comes
+back blank with a clean console:
+
+  1. <div id="root"></div> exists in the body.
+  2. The last line of your script calls
+     ReactDOMClient.createRoot(document.getElementById('root')).render(<App />)
+     Defining App is not rendering it. Nothing fails, so nothing is reported.
+  3. Your code is inside <script type="text/babel" data-presets="react">, or
+     the JSX is run as plain JavaScript and dies on the first tag.
+  4. Every component you use is destructured from window.UmkmallUI. A name you
+     reference without destructuring is a ReferenceError; a name the library
+     does not publish is undefined and renders nothing.
+
+=====================================================================
+4. THE ROOM
+=====================================================================
+
+An MLJ prototype is a CHAT, not a page of cards: full viewport height, no page
+scroll, a fixed header, the journey's chrome under it, one scrolling
+transcript, and a composer pinned at the bottom. The worked arrangement is the
+demo file in section 2 — read it rather than inventing a layout.
+
+What that file gets right, and what goes wrong without it:
+
+  - ChatThread IS the scroller. Wrap it in your own overflow-y-auto and two
+    scrollers fight; the top of the transcript is clipped. ChatMessageList
+    sits inside it and owns the measure and the bottom alignment.
+  - Text goes STRAIGHT into ChatMessageBubble. The bubble already draws the
+    fill, the rounding, the padding and the side it sits on, and the sender
+    prop decides the colour. Your own styled div inside it is a bubble inside
+    a bubble: two fills, two paddings, the turn indented twice.
+  - ASSISTANT turns take ghost; user turns do not. The live surface fills and
+    rounds the user side only.
+  - ChatComposer, never ChatComposerInput alone. The Input is the editor only,
+    so on its own you get a field with no send button and reach for a
+    hand-rolled one.
+  - The reading column carries a MEASURE AND NOTHING ELSE. Height, flex or
+    borders in it turn a shared class into a box drawn around the transcript.
+    Height belongs to AppShell and ChatThread.
+  - Stepper takes ONE steps array — its position and state axes belong to a
+    step. ProgressBar needs value AND max, and flex-1, or it draws an empty
+    track with its label jammed against its percentage.
+  - No Sidebar. A prototype is one journey on one screen: leave AppShell's
+    sidebar and mobileSidebar slots empty, as the demo does.
+
+A journey is four missions — a core tool, then Insight, Strategi, Rencana
+Aksi — with a Dialog after each one asking an open question and a feasibility
+choice (bisa / usaha / belum) through SelectionCard. Keep AI output as static
+placeholder text unless I ask you to wire a model.
+
+=====================================================================
+5. RULES
+=====================================================================
+
+- Use the components in the appendix and nothing else. If one you want is not
+  there, build it from the ones that are — never hand-roll markup imitating a
+  component the library publishes.
+- Pass only the axis values listed, and pass every REQUIRED prop an entry
+  names. A wrong axis value renders unstyled with no error; a missing required
+  prop usually throws inside the component and takes the whole page blank.
+- Spacing and colour come from tokens: the ds scale (gap-ds-md, px-ds-md) and
+  the semantic colours (bg-default-primary, text-default-secondary). Tailwind's
+  own palette (bg-blue-600, text-white) is not this design system — it compiles
+  and gives you a colour nobody chose. An invented name like bg-brand-primary
+  is not in the theme at all and resolves to nothing.
+- Button's width prop sizes it to its label, but a flex column stretches its
+  children anyway — wrap it in <div className="flex"> to stop it spanning.
+- NEVER put an API key, token or password in the file. It gets sent to other
+  people and opened on machines you do not control, and nothing strips it out.
+- The prototype needs the network every time it is opened: jsDelivr for the
+  UMKMall scripts and the JSX compiler, the Tailwind Play CDN, and Google
+  Fonts. Keep the starter's <head> exactly as it is — its hosts are the ones
+  Claude's and Gemini's previews allow, and a tag moved to any other host
+  (unpkg, the design site, a copy you made) renders blank there. The token CSS
+  is INLINED in its <style> on purpose: a claude.ai artifact loads stylesheets
+  only from Google Fonts, so never turn that <style> back into a <link>.
+- A page in a serif font, without colours, or with white text on white means
+  the token CSS or the base text colour did not load: check that the starter's
+  <style> is intact and <body> still has bg-default-primary text-default-primary.
+
+=====================================================================
+THE COMPONENT LIST
+=====================================================================
+
+Not written here. It is a published file, always current, and it carries each
+component's axes AND the props it will not render without:
+
+  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h1986a9b52d36/umkmall-components.md
+
+Fetch it, or ask me to paste it. Do not work from memory of another design
+system — an invented axis value renders unstyled with no error, and a missing
+required prop usually throws inside the component and takes the page blank.
+

package/umkmall-starter-app.md

@@ -0,0 +1,365 @@
+# UMKMall prototyping starter — the editable block
+
+This is the `<script type="text/babel">` block from [the starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h1986a9b52d36/umkmall-prototype-starter.html), on its own
+so it can be read or pasted without the surrounding HTML.
+
+It renders a working chat room: a header, the journey's progress rail and quota meters, a
+scrolling transcript and a pinned composer. Edit the part between the `REPLACE THIS` and
+`end of the part you replace` markers; keep the shell around it.
+
+The `<head>` it needs is in the starter, or in section 3 of [the prompt](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h1986a9b52d36/umkmall-rules.md).
+
+```jsx
+/*
+ * The starter's demo: an MLJ journey as a CHAT ROOM. AUTHORED — this file is the content of the
+ * `text/babel` block in the generated starter, copied in verbatim.
+ *
+ * IT IS A CHAT APP, AND THAT IS THE WHOLE CORRECTION. The first version drew the journey as a
+ * document — a column of cards you scrolled. Every real MLJ prototype is a chat: a fixed header,
+ * the journey's chrome under it, a scrolling transcript filling the rest, a composer pinned at
+ * the bottom. Starting from a document layout means rebuilding the room before you can begin,
+ * which is exactly the hand-building this kit exists to remove.
+ *
+ * THE LIBRARY PUBLISHES FOURTEEN CHAT COMPONENTS and the document version used none of them.
+ * `ChatThread` owns the scroller and the "jump to latest" pill; `ChatMessageList` owns the
+ * measure and the bottom alignment; `ChatComposer` owns the editor, its tray and its button
+ * rows. Hand-rolling any of that is the drift this kit exists to stop.
+ *
+ * Mission 2 (Insight) runs end to end; the other three are named in the rail on the same shape.
+ * Building all four would make this file long enough that people edit it without reading it.
+ * The AI calls are STUBS — wiring a model is the author's job, and a key in a file that gets
+ * sent to other people is the thing to avoid.
+ *
+ * It is a `.jsx` file so an editor highlights it. It is never imported or bundled — it is read
+ * as text by `build-assets.mjs`, which is why it uses the globals below rather than imports.
+ */
+
+const {
+  React,
+  ReactDOMClient,
+  AppShell,
+  Button,
+  ChatAttachmentButton,
+  ChatComposer,
+  ChatMessage,
+  ChatMessageBubble,
+  ChatMessageList,
+  ChatMessageMetadata,
+  ChatSendButton,
+  ChatThread,
+  ChatToolsButton,
+  ChatVoiceButton,
+  Chip,
+  Dialog,
+  Header,
+  Icon,
+  ProgressBar,
+  SelectionCard,
+  Stepper,
+  Text,
+  TextField,
+} = window.UmkmallUI;
+
+/* THE READING COLUMN, AND NO COMPONENT OWNS IT. `AppShell`'s content slot deliberately imposes
+   no measure — that would be wrong for every non-prose surface — so the width lives here, once,
+   shared by the three regions that have to line up: chrome, transcript and composer. */
+const COLUMN = 'mx-auto w-full max-w-3xl px-ds-md';
+
+/* ---------------------------------------------------------------- the journey's shape */
+
+/** The four-mission arc. Mission 1 is the swappable tool that differs per journey. */
+const MISSIONS = [
+  { id: 'foto', label: 'Foto Produk' },
+  { id: 'insight', label: 'Insight' },
+  { id: 'strategi', label: 'Strategi' },
+  { id: 'aksi', label: 'Rencana Aksi' },
+];
+
+/* ---------------------------------------------------------------- chrome */
+
+/**
+ * The journey chrome: progress rail + quota meters, in one `shrink-0` band under the header.
+ *
+ * IT SITS OUTSIDE THE SCROLLER ON PURPOSE. The rail says where you are and the meters say what
+ * you have left to spend — both are answers you want *while* reading the transcript, so
+ * scrolling them away would be wrong. Same reason the composer is pinned.
+ */
+const JourneyChrome = ({ current }) => (
+  <div className="shrink-0 border-b border-default-primary py-ds-xs">
+    <div className={`${COLUMN} flex flex-col gap-ds-2xs`}>
+      <Stepper
+        orientation="horizontal"
+        steps={MISSIONS.map((mission, index) => ({
+          label: mission.label,
+          state: index < current ? 'done' : index === current ? 'current' : 'default',
+          position: index === 0 ? 'first' : index === MISSIONS.length - 1 ? 'last' : 'middle',
+        }))}
+      />
+      {/* `flex-1` ON EACH BAR, not just a gap on the row. `ProgressBar` justifies its label and
+          its percentage to opposite ends, so a bar sized to its content jams the two together —
+          "Kuota AI hari ini60%" — which reads as a rendering bug rather than a meter. */}
+      <div className="flex gap-ds-md">
+        <ProgressBar className="flex-1" label="Kuota AI hari ini" value={3} max={5} size="small" variant="default" />
+        <ProgressBar
+          className="flex-1"
+          label="Misi selesai"
+          value={current}
+          max={MISSIONS.length}
+          size="small"
+          variant="success"
+        />
+      </div>
+    </div>
+  </div>
+);
+
+/* ---------------------------------------------------------------- the turn parts */
+
+/** The assistant's face. */
+const Face = () => (
+  <span
+    aria-hidden
+    className="flex h-7 w-7 items-center justify-center rounded-full bg-default-secondary text-[10px] text-default-secondary"
+  >
+    AI
+  </span>
+);
+
+/* Named buttons — an icon-only control with no accessible name announces nothing at all. */
+const ACTIONS = [
+  ['thumbs-up', 'Jawaban ini membantu'],
+  ['thumbs-down', 'Jawaban ini tidak membantu'],
+  ['rotate-cw', 'Buat ulang jawaban'],
+];
+
+const Actions = () => (
+  <div className="flex items-center gap-ds-4xs">
+    {ACTIONS.map(([icon, label]) => (
+      <Button key={icon} type="text" color="light" size="micro" iconOnly aria-label={label}>
+        <Icon name={icon} aria-hidden className="h-4 w-4" />
+      </Button>
+    ))}
+  </div>
+);
+
+/** The follow-up chips offered under a settled reply. */
+const Suggestions = ({ items, onPick }) => (
+  <div className="flex flex-wrap gap-ds-4xs">
+    {items.map((item) => (
+      <Chip key={item} size="small" onClick={() => onPick(item)}>
+        {item}
+      </Chip>
+    ))}
+  </div>
+);
+
+/* ---------------------------------------------------------------- the transcript */
+
+/** The opening turns of Mission 2, as a conversation rather than a card list. */
+const OPENING = [
+  { from: 'assistant', text: 'Halo! Saya sudah lihat data toko Anda minggu ini. Siap mulai Misi 2?' },
+  { from: 'user', text: 'Siap. Apa temuan terbesarnya?' },
+  {
+    from: 'assistant',
+    text: 'Empat temuan. Yang paling besar: harga Anda 18% di bawah rata-rata pasar, jadi margin tipis padahal permintaan sedang naik.',
+    suggestions: ['Jelaskan temuan lainnya', 'Kenapa itu penting?', 'Lanjut ke refleksi'],
+  },
+];
+
+/** One reply, stubbed. Wiring a real model is the prototype author's job — see the header. */
+const stubReply = (question) =>
+  `(Contoh jawaban) Anda bertanya "${question}". Ganti fungsi stubReply dengan panggilan model Anda.`;
+
+/* =====================================================================
+ * REPLACE THIS. Everything above is the journey shell; this is your prototype.
+ *
+ * EVERY ASSISTANT BUBBLE IS A GHOST. The live surface fills and rounds the USER side only, so a
+ * reply draws as prose in the message column with no container around it. `ghost` is exactly
+ * that: the fill goes, the inline padding stays, so text still lines up with anything beneath it.
+ * ===================================================================== */
+function Konten({ messages, onSuggestion }) {
+  return (
+    <ChatMessageList label="Percakapan Mini Learning Journey" align="bottom" className={COLUMN}>
+      {messages.map((message, index) =>
+        message.from === 'user' ? (
+          <ChatMessage key={index} sender="user">
+            <ChatMessageBubble metadata={<ChatMessageMetadata timestamp="09:41" status="read" />}>
+              {message.text}
+            </ChatMessageBubble>
+          </ChatMessage>
+        ) : (
+          <ChatMessage key={index} sender="assistant" avatar={<Face />} name="Teman AI">
+            <ChatMessageBubble
+              ghost
+              metadata={
+                <ChatMessageMetadata
+                  footer={
+                    <div className="flex flex-col gap-ds-4xs">
+                      <Actions />
+                      {message.suggestions ? (
+                        <Suggestions items={message.suggestions} onPick={onSuggestion} />
+                      ) : null}
+                    </div>
+                  }
+                />
+              }
+            >
+              {message.text}
+            </ChatMessageBubble>
+          </ChatMessage>
+        ),
+      )}
+    </ChatMessageList>
+  );
+}
+/* ===================== end of the part you replace ==================== */
+
+/* ---------------------------------------------------------------- the composer */
+
+/* STATEFUL, BECAUSE THE COMPOSER IS CONTROLLED. A fixed value and a no-op handler render an
+   editor nobody can type into — a defect this family's own stories shipped once. */
+function Composer({ onSend }) {
+  const [value, setValue] = React.useState('');
+  const submit = () => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onSend(trimmed);
+    setValue('');
+  };
+  return (
+    <ChatComposer
+      value={value}
+      onValueChange={setValue}
+      editorLabel="Tulis pesan"
+      placeholder="Tanya apa saja tentang misi ini..."
+      toolActions={
+        <>
+          <ChatToolsButton label="Alat" />
+          <ChatAttachmentButton label="Lampirkan foto produk" />
+        </>
+      }
+      sendActions={
+        <>
+          <ChatVoiceButton label="Input suara" />
+          <ChatSendButton label="Kirim pesan" onClick={submit} />
+        </>
+      }
+    />
+  );
+}
+
+/* ---------------------------------------------------------------- the reflection overlay */
+
+/* One open question and one feasibility choice, after each mission. A `Dialog` rather than a
+   route, because the journey is one continuous surface. */
+function Reflection({ open, onOpenChange, mission }) {
+  const [answer, setAnswer] = React.useState('');
+  const [feasible, setFeasible] = React.useState('bisa');
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      showCloseButton
+      title={`Refleksi — ${mission.label}`}
+      /* `description` is VISUALLY HIDDEN — it wires `aria-describedby`, it does not draw
+         subtext. Passing prose here and expecting to see it is how this dialog first shipped
+         with an invisible subtitle. Visible subtext is a `Text` in the body, below. */
+      description="Dua pertanyaan singkat sebelum melanjutkan ke misi berikutnya."
+    >
+      {/* THE PANEL PADS ITS TITLE AND NOT ITS CHILDREN. `Dialog` gives the heading `px-6 pt-4`
+          and renders the body with none, so the caller owns it — without this the field, the
+          cards and the button all run edge to edge against the panel border. */}
+      <div className="flex flex-col gap-ds-md px-6 pb-6 pt-ds-sm">
+        <Text variant="bodySm" color="secondary">
+          Dua pertanyaan singkat sebelum lanjut.
+        </Text>
+        <TextField
+          label="Apa satu hal yang akan Anda ubah minggu ini?"
+          value={answer}
+          onChange={(event) => setAnswer(event.target.value)}
+          placeholder="Tulis jawaban Anda..."
+        />
+        <div className="flex flex-col gap-ds-2xs">
+          <Text variant="bodySm" weight="semibold">
+            Seberapa mungkin Anda melakukannya?
+          </Text>
+          {/* ONE GROUP, NOT ONE CARD PER OPTION. `SelectionCard` takes the whole `options` array
+              and owns selection itself; a per-option `selected` prop does not exist, and an
+              invented prop renders with no styling and no error. */}
+          <SelectionCard
+            options={[
+              { value: 'bisa', label: 'Bisa saya lakukan minggu ini' },
+              { value: 'usaha', label: 'Perlu usaha ekstra' },
+              { value: 'belum', label: 'Belum bisa sekarang' },
+            ]}
+            value={[feasible]}
+            onValueChange={(picked) => setFeasible(picked[0] ?? 'bisa')}
+          />
+        </div>
+        <div className="flex">
+          <Button type="primary" color="primary" size="medium" width="auto" onClick={() => onOpenChange(false)}>
+            Simpan &amp; lanjut
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+/* ---------------------------------------------------------------- the room */
+
+function App() {
+  const [reflecting, setReflecting] = React.useState(false);
+  const [current, setCurrent] = React.useState(1);
+  const [messages, setMessages] = React.useState(OPENING);
+
+  /* One turn: the user's message, then a stubbed reply. Replace `stubReply` with your model. */
+  const send = (text) => {
+    if (text === 'Lanjut ke refleksi') {
+      setMessages((previous) => [...previous, { from: 'user', text }]);
+      setReflecting(true);
+      setCurrent((step) => Math.min(step + 1, MISSIONS.length));
+      return;
+    }
+    setMessages((previous) => [
+      ...previous,
+      { from: 'user', text },
+      { from: 'assistant', text: stubReply(text) },
+    ]);
+  };
+
+  return (
+    <React.Fragment>
+      <AppShell
+        header={({ scrolled }) => (
+          <Header
+            type="temanAiChat"
+            title="Mini Learning Journey"
+            showTextLeft
+            scrolled={scrolled}
+          />
+        )}
+        /* NO SIDEBAR. A prototype is one journey on one screen — an app-navigation rail is
+           chrome it does not have, and a drawer needs a trigger and state before it can open. */
+      >
+        <JourneyChrome current={current} />
+        <ChatThread scrollToBottomLabel="Ke pesan terbaru">
+          <Konten messages={messages} onSuggestion={send} />
+        </ChatThread>
+        <div className="shrink-0 py-ds-md">
+          <div className={COLUMN}>
+            <Composer onSend={send} />
+          </div>
+        </div>
+      </AppShell>
+      <Reflection
+        open={reflecting}
+        onOpenChange={setReflecting}
+        mission={MISSIONS[Math.min(current, MISSIONS.length - 1)]}
+      />
+    </React.Fragment>
+  );
+}
+
+ReactDOMClient.createRoot(document.getElementById('root')).render(<App />);
+```