From 37f284f9a97d3354143d64fc76c2eb9f7d9ccf9e Mon Sep 17 00:00:00 2001
From: Frank <frank@sst.dev>
Date: Fri, 29 Aug 2025 23:32:17 -0400
Subject: wip: cloud

---
 cloud/web/src/pages/test/design.module.css | 204 -----------
 cloud/web/src/pages/test/design.tsx        | 562 -----------------------------
 2 files changed, 766 deletions(-)
 delete mode 100644 cloud/web/src/pages/test/design.module.css
 delete mode 100644 cloud/web/src/pages/test/design.tsx

(limited to 'cloud/web/src/pages/test')

diff --git a/cloud/web/src/pages/test/design.module.css b/cloud/web/src/pages/test/design.module.css
deleted file mode 100644
index fee4e3cd3..000000000
--- a/cloud/web/src/pages/test/design.module.css
+++ /dev/null
@@ -1,204 +0,0 @@
-.pageContainer {
-  padding: 2rem;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.componentTable {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
-  border: 2px solid var(--color-border);
-}
-
-.componentCell {
-  padding: 1rem;
-  border: 2px solid var(--color-border);
-  vertical-align: top;
-}
-
-.componentLabel {
-  text-transform: uppercase;
-  letter-spacing: -0.03125rem;
-  font-size: 0.85rem;
-  font-weight: 500;
-  margin-bottom: 0.75rem;
-  color: var(--color-text-dimmed);
-}
-
-.sectionTitle {
-  margin-bottom: 1rem;
-  text-transform: uppercase;
-  letter-spacing: -0.03125rem;
-  font-size: 1.2rem;
-}
-
-.divider {
-  height: 2px;
-  background: var(--color-border);
-  margin: 3rem 0;
-  width: 100%;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
-}
-
-.buttonSection {
-  margin-bottom: 4rem;
-}
-
-.colorSection {
-  margin-bottom: 4rem;
-}
-
-.labelSection {
-  margin-bottom: 4rem;
-}
-
-.inputSection {
-  margin-bottom: 4rem;
-}
-
-.dialogSection {
-  margin-bottom: 4rem;
-}
-
-.formGroup {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.dialogContent {
-  padding: 2rem;
-}
-
-.dialogContentFooter {
-  margin-top: 1rem;
-}
-
-.pageTitle {
-  font-size: var(--heading-font-size, 2rem);
-  text-transform: uppercase;
-  font-weight: 600;
-}
-
-.colorBox {
-  width: 100%;
-  height: 80px;
-  margin-bottom: 0.5rem;
-  position: relative;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding-bottom: 0.5rem;
-}
-
-.colorOrange {
-  background-color: var(--color-orange);
-}
-
-.colorOrangeLow {
-  background-color: var(--color-orange-low);
-}
-
-.colorOrangeHigh {
-  background-color: var(--color-orange-high);
-}
-
-.colorGreen {
-  background-color: var(--color-green);
-}
-
-.colorGreenLow {
-  background-color: var(--color-green-low);
-}
-
-.colorGreenHigh {
-  background-color: var(--color-green-high);
-}
-
-.colorBlue {
-  background-color: var(--color-blue);
-}
-
-.colorBlueLow {
-  background-color: var(--color-blue-low);
-}
-
-.colorBlueHigh {
-  background-color: var(--color-blue-high);
-}
-
-.colorPurple {
-  background-color: var(--color-purple);
-}
-
-.colorPurpleLow {
-  background-color: var(--color-purple-low);
-}
-
-.colorPurpleHigh {
-  background-color: var(--color-purple-high);
-}
-
-.colorRed {
-  background-color: var(--color-red);
-}
-
-.colorRedLow {
-  background-color: var(--color-red-low);
-}
-
-.colorRedHigh {
-  background-color: var(--color-red-high);
-}
-
-.colorAccent {
-  background-color: var(--color-accent);
-}
-
-.colorAccentLow {
-  background-color: var(--color-accent-low);
-}
-
-.colorAccentHigh {
-  background-color: var(--color-accent-high);
-}
-
-.colorCode {
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 0.8rem;
-  font-family: monospace;
-}
-
-.colorVariants {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.colorVariant {
-  flex: 1;
-  height: 40px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.colorVariantCode {
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-size: 0.65rem;
-  font-family: monospace;
-  white-space: nowrap;
-}
diff --git a/cloud/web/src/pages/test/design.tsx b/cloud/web/src/pages/test/design.tsx
deleted file mode 100644
index 3bf759316..000000000
--- a/cloud/web/src/pages/test/design.tsx
+++ /dev/null
@@ -1,562 +0,0 @@
-import { Button } from "../../ui/button"
-import { Dialog } from "../../ui/dialog"
-import { Navigate } from "@solidjs/router"
-import { createSignal, Show } from "solid-js"
-import { IconHome, IconPencilSquare } from "../../ui/svg/icons"
-import { useTheme } from "../../components/context-theme"
-import { useDialog } from "../../ui/context-dialog"
-import { DialogString } from "../../ui/dialog-string"
-import { DialogSelect } from "../../ui/dialog-select"
-import styles from "./design.module.css"
-
-export default function DesignSystem() {
-  const dialog = useDialog()
-  const [dialogOpen, setDialogOpen] = createSignal(false)
-  const [dialogOpenTransition, setDialogOpenTransition] = createSignal(false)
-  const theme = useTheme()
-
-  // Check if we're running locally
-  const isLocal = import.meta.env.DEV === true
-
-  if (!isLocal) {
-    return <Navigate href="/" />
-  }
-
-  // Add a toggle button for theme
-  const toggleTheme = () => {
-    theme.setMode(theme.mode === "light" ? "dark" : "light")
-  }
-
-  return (
-    <div class={styles.pageContainer}>
-      <div class={styles.header}>
-        <h1 class={styles.pageTitle}>Design System</h1>
-        <Button onClick={toggleTheme}>
-          Toggle {theme.mode === "light" ? "Dark" : "Light"} Mode
-        </Button>
-      </div>
-
-      <section class={styles.colorSection}>
-        <h2 class={styles.sectionTitle}>Colors</h2>
-
-        <table class={styles.componentTable}>
-          <tbody>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Orange</h3>
-                <div class={`${styles.colorBox} ${styles.colorOrange}`}>
-                  <span class={styles.colorCode}>hsl(41, 82%, 63%)</span>
-                </div>
-                <div class={styles.colorVariants}>
-                  <div
-                    class={`${styles.colorVariant} ${styles.colorOrangeLow}`}
-                  >
-                    <span class={styles.colorVariantCode}>
-                      hsl(41, 39%, 22%)
-                    </span>
-                  </div>
-                  <div
-                    class={`${styles.colorVariant} ${styles.colorOrangeHigh}`}
-                  >
-                    <span class={styles.colorVariantCode}>
-                      hsl(41, 82%, 87%)
-                    </span>
-                  </div>
-                </div>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Green</h3>
-                <div class={`${styles.colorBox} ${styles.colorGreen}`}>
-                  <span class={styles.colorCode}>hsl(101, 82%, 63%)</span>
-                </div>
-                <div class={styles.colorVariants}>
-                  <div class={`${styles.colorVariant} ${styles.colorGreenLow}`}>
-                    <span class={styles.colorVariantCode}>
-                      hsl(101, 39%, 22%)
-                    </span>
-                  </div>
-                  <div
-                    class={`${styles.colorVariant} ${styles.colorGreenHigh}`}
-                  >
-                    <span class={styles.colorVariantCode}>
-                      hsl(101, 82%, 80%)
-                    </span>
-                  </div>
-                </div>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Blue</h3>
-                <div class={`${styles.colorBox} ${styles.colorBlue}`}>
-                  <span class={styles.colorCode}>hsl(234, 100%, 60%)</span>
-                </div>
-                <div class={styles.colorVariants}>
-                  <div class={`${styles.colorVariant} ${styles.colorBlueLow}`}>
-                    <span class={styles.colorVariantCode}>
-                      hsl(234, 54%, 20%)
-                    </span>
-                  </div>
-                  <div class={`${styles.colorVariant} ${styles.colorBlueHigh}`}>
-                    <span class={styles.colorVariantCode}>
-                      hsl(234, 100%, 87%)
-                    </span>
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Purple</h3>
-                <div class={`${styles.colorBox} ${styles.colorPurple}`}>
-                  <span class={styles.colorCode}>hsl(281, 82%, 63%)</span>
-                </div>
-                <div class={styles.colorVariants}>
-                  <div
-                    class={`${styles.colorVariant} ${styles.colorPurpleLow}`}
-                  >
-                    <span class={styles.colorVariantCode}>
-                      hsl(281, 39%, 22%)
-                    </span>
-                  </div>
-                  <div
-                    class={`${styles.colorVariant} ${styles.colorPurpleHigh}`}
-                  >
-                    <span class={styles.colorVariantCode}>
-                      hsl(281, 82%, 89%)
-                    </span>
-                  </div>
-                </div>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Red</h3>
-                <div class={`${styles.colorBox} ${styles.colorRed}`}>
-                  <span class={styles.colorCode}>hsl(339, 82%, 63%)</span>
-                </div>
-                <div class={styles.colorVariants}>
-                  <div class={`${styles.colorVariant} ${styles.colorRedLow}`}>
-                    <span class={styles.colorVariantCode}>
-                      hsl(339, 39%, 22%)
-                    </span>
-                  </div>
-                  <div class={`${styles.colorVariant} ${styles.colorRedHigh}`}>
-                    <span class={styles.colorVariantCode}>
-                      hsl(339, 82%, 87%)
-                    </span>
-                  </div>
-                </div>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Accent</h3>
-                <div class={`${styles.colorBox} ${styles.colorAccent}`}>
-                  <span class={styles.colorCode}>hsl(13, 88%, 57%)</span>
-                </div>
-                <div class={styles.colorVariants}>
-                  <div
-                    class={`${styles.colorVariant} ${styles.colorAccentLow}`}
-                  >
-                    <span class={styles.colorVariantCode}>
-                      hsl(13, 75%, 30%)
-                    </span>
-                  </div>
-                  <div
-                    class={`${styles.colorVariant} ${styles.colorAccentHigh}`}
-                  >
-                    <span class={styles.colorVariantCode}>
-                      hsl(13, 100%, 78%)
-                    </span>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <div class={styles.divider}></div>
-
-      <section class={styles.buttonSection}>
-        <h2 class={styles.sectionTitle}>Buttons</h2>
-
-        <table class={styles.componentTable}>
-          <tbody>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Primary</h3>
-                <Button>Primary Button</Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Secondary</h3>
-                <Button color="secondary">Secondary Button</Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Ghost</h3>
-                <Button color="ghost">Ghost Button</Button>
-              </td>
-            </tr>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Primary Disabled</h3>
-                <Button disabled>Primary Button</Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Secondary Disabled</h3>
-                <Button color="secondary" disabled>
-                  Secondary Button
-                </Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Ghost Disabled</h3>
-                <Button color="ghost" disabled>
-                  Ghost Button
-                </Button>
-              </td>
-            </tr>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Small</h3>
-                <Button size="sm">Small Button</Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Small Secondary</h3>
-                <Button size="sm" color="secondary">
-                  Small Secondary
-                </Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Small Ghost</h3>
-                <Button size="sm" color="ghost">
-                  Small Ghost
-                </Button>
-              </td>
-            </tr>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>With Icon</h3>
-                <Button icon={<IconHome />}>With Icon</Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Icon + Secondary</h3>
-                <Button icon={<IconHome />} color="secondary">
-                  Icon Secondary
-                </Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Icon + Ghost</h3>
-                <Button icon={<IconHome />} color="ghost">
-                  Icon Ghost
-                </Button>
-              </td>
-            </tr>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Small + Icon</h3>
-                <Button size="sm" icon={<IconHome />}>
-                  Small Icon
-                </Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Small + Icon + Secondary</h3>
-                <Button size="sm" icon={<IconHome />} color="secondary">
-                  Small Icon Secondary
-                </Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Small + Icon + Ghost</h3>
-                <Button size="sm" icon={<IconHome />} color="ghost">
-                  Small Icon Ghost
-                </Button>
-              </td>
-            </tr>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Icon Only</h3>
-                <Button icon={<IconHome />}></Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Icon Only + Secondary</h3>
-                <Button icon={<IconHome />} color="secondary"></Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Icon Only + Ghost</h3>
-                <Button icon={<IconHome />} color="ghost"></Button>
-              </td>
-            </tr>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Icon Only Disabled</h3>
-                <Button icon={<IconHome />} disabled></Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>
-                  Icon Only + Secondary Disabled
-                </h3>
-                <Button icon={<IconHome />} color="secondary" disabled></Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>
-                  Icon Only + Ghost Disabled
-                </h3>
-                <Button icon={<IconHome />} color="ghost" disabled></Button>
-              </td>
-            </tr>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Small Icon Only</h3>
-                <Button size="sm" icon={<IconHome />}></Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>
-                  Small Icon Only + Secondary
-                </h3>
-                <Button
-                  size="sm"
-                  icon={<IconHome />}
-                  color="secondary"
-                ></Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Small Icon Only + Ghost</h3>
-                <Button size="sm" icon={<IconHome />} color="ghost"></Button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <div class={styles.divider}></div>
-
-      <section class={styles.labelSection}>
-        <h2 class={styles.sectionTitle}>Labels</h2>
-
-        <table class={styles.componentTable}>
-          <tbody>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Small</h3>
-                <label data-size="sm" data-component="label">
-                  Small Label Text
-                </label>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Medium</h3>
-                <label data-size="md" data-component="label">
-                  Medium Label Text
-                </label>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Large</h3>
-                <label data-size="lg" data-component="label">
-                  Large Label Text
-                </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <div class={styles.divider}></div>
-
-      <section class={styles.inputSection}>
-        <h2 class={styles.sectionTitle}>Inputs</h2>
-
-        <table class={styles.componentTable}>
-          <tbody>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Small</h3>
-                <input
-                  data-component="input"
-                  data-size="sm"
-                  placeholder="Small input field"
-                />
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Medium</h3>
-                <input
-                  data-component="input"
-                  data-size="md"
-                  placeholder="Medium input field"
-                />
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Large</h3>
-                <input
-                  data-component="input"
-                  data-size="lg"
-                  placeholder="Large input field"
-                />
-              </td>
-            </tr>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Disabled</h3>
-                <input
-                  data-component="input"
-                  data-size="md"
-                  placeholder="Disabled input"
-                  disabled
-                />
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>With Value</h3>
-                <input
-                  data-component="input"
-                  data-size="md"
-                  value="Input with preset value"
-                  readOnly
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <div class={styles.divider}></div>
-
-      <section class={styles.dialogSection}>
-        <h2 class={styles.sectionTitle}>Dialogs</h2>
-
-        <table class={styles.componentTable}>
-          <tbody>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Default</h3>
-                <Button color="secondary" onClick={() => setDialogOpen(true)}>
-                  Open Dialog
-                </Button>
-                <Dialog open={dialogOpen()} onOpenChange={setDialogOpen}>
-                  <div data-slot="header">
-                    <div data-slot="title">Dialog Title</div>
-                  </div>
-                  <div data-slot="main">
-                    <p>This is the default dialog content.</p>
-                  </div>
-                  <div data-slot="footer">
-                    <Button onClick={() => setDialogOpen(false)}>Close</Button>
-                  </div>
-                </Dialog>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Small With Transition</h3>
-                <Button
-                  color="secondary"
-                  onClick={() => {
-                    setDialogOpenTransition(true)
-                  }}
-                >
-                  Small Dialog
-                </Button>
-                <Dialog
-                  open={dialogOpenTransition()}
-                  onOpenChange={setDialogOpenTransition}
-                  size="sm"
-                  transition={true}
-                >
-                  <div class={styles.dialogContent}>
-                    <h2 class={styles.sectionTitle}>Small Dialog</h2>
-                    <p>This is a smaller dialog with transitions.</p>
-                    <div class={styles.dialogContentFooter}>
-                      <Button onClick={() => setDialogOpenTransition(false)}>
-                        Close
-                      </Button>
-                    </div>
-                  </div>
-                </Dialog>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Input String</h3>
-                <Button
-                  color="secondary"
-                  onClick={() =>
-                    dialog.open(DialogString, {
-                      title: "Name",
-                      action: "Change name",
-                      placeholder: "Enter a name",
-                      onSubmit: () => {},
-                    })
-                  }
-                >
-                  String
-                </Button>
-              </td>
-            </tr>
-            <tr>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Select Input</h3>
-                <Button
-                  color="secondary"
-                  onClick={() =>
-                    dialog.open(DialogSelect, {
-                      placeholder: "Select",
-                      title: "User Settings",
-                      options: [
-                        {
-                          display: "Change name",
-                          prefix: <IconPencilSquare />,
-                          onSelect: () => {
-                            dialog.close()
-                          },
-                        },
-                        {
-                          display: "Remove user",
-                          prefix: <IconHome />,
-                          onSelect: () => {
-                            dialog.close()
-                          },
-                        },
-                      ],
-                    })
-                  }
-                >
-                  Select
-                </Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Select Input</h3>
-                <Button
-                  color="secondary"
-                  onClick={() =>
-                    dialog.open(DialogSelect, {
-                      placeholder: "Select",
-                      title: "User Settings",
-                      options: [
-                        {
-                          display: "Change name",
-                          onSelect: () => {
-                            dialog.close()
-                          },
-                        },
-                        {
-                          display: "Remove user",
-                          onSelect: () => {
-                            dialog.close()
-                          },
-                        },
-                      ],
-                    })
-                  }
-                >
-                  No Prefix
-                </Button>
-              </td>
-              <td class={styles.componentCell}>
-                <h3 class={styles.componentLabel}>Select No Options</h3>
-                <Button
-                  color="secondary"
-                  onClick={() =>
-                    dialog.open(DialogSelect, {
-                      placeholder: "Select",
-                      title: "User Settings",
-                      options: [],
-                    })
-                  }
-                >
-                  No Options
-                </Button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-    </div>
-  )
-}
-- 
cgit v1.2.3