@supportpages.io/wtfm 0.0.0-stage → 0.3.0

package/engine/detect-project/assets/macosui/macos-frame.css

@@ -0,0 +1,481 @@
+/* macos-frame.css — hand-authored glue for macos-mode (native AppKit app)
+ * mockups. Concatenated LAST by detect-project's macos branch:
+ *   branding.css = puppertino.css + fonts.css + desktop-frame.css + macos-frame.css
+ * so plain source order lets these rules extend the desktop bundle's mac
+ * window chrome and Puppertino's widgets. Never regenerated by
+ * tools/build_macosui_bundle.sh.
+ *
+ * These classes ship in branding.css on purpose: the fidelity lint hard-fails
+ * classes a mockup defines in its own <style> block, so the frame must be
+ * pre-defined here and mockups may only USE these class names. The CSS vars
+ * below also whitelist the macOS system palette for the lint's colour check.
+ *
+ * The load-bearing bits:
+ *   - .desktop-titlebar--macos-unified is a MODIFIER on .desktop-titlebar
+ *     (NSWindowToolbarStyleUnified: 52px, traffic lights → title left-of-
+ *     toolbar → toolbar items right). The contract stays "exactly one
+ *     .desktop-titlebar", with or without the modifier.
+ *   - .macos-stage--menubar flips the stage to a COLUMN: .desktop-stage is a
+ *     flex row, so without the modifier a menubar strip would sit beside the
+ *     window, not above it. The strip is full-bleed and positioned so its
+ *     dropdown paints over the later-DOM window.
+ *   - .desktop-window-content is re-declared flex-column here with
+ *     .macos-statusbar { margin-top: auto } — the win32 round-2 floating-
+ *     statusbar pin lives in win32-frame.css and does NOT carry over.
+ *   - Sheets are position:absolute inside .desktop-window-content (top-
+ *     anchored, like real NSWindow sheets); never fixed (escapes the frame).
+ */
+
+:root {
+    --macos-accent: #007aff;
+    --macos-window-bg: #f6f6f6;
+    --macos-sidebar-bg: #eaeaec;
+    --macos-row-alt: #f5f5f7;
+    --macos-border: #dcdcde;
+    --macos-text-secondary: #6e6e73;
+    /* macOS system palette (Apple HIG system colours) — declared here so the
+     * lint's colour whitelist admits them; use for progress/status accents. */
+    --macos-green: #34c759;
+    --macos-red: #ff3b30;
+    --macos-orange: #ff9500;
+    --macos-yellow: #ffcc00;
+    --macos-gray: #98989d;
+}
+
+.desktop-window {
+    font-family: -apple-system, 'SF Pro Text', 'Inter', 'Helvetica Neue', sans-serif;
+    font-size: 13px;
+    color: #1d1d1f;
+}
+
+.desktop-window-content {
+    display: flex;
+    flex-direction: column;
+    background: var(--macos-window-bg);
+}
+
+/* ── Unified titlebar (NSWindowToolbarStyleUnified) ───────────────────────── */
+
+.desktop-titlebar.desktop-titlebar--macos-unified {
+    height: 52px;
+    padding: 0 16px 0 20px;
+    background: linear-gradient(#f7f7f7, #efeff0);
+    gap: 12px;
+}
+
+/* Unified titles sit left-of-toolbar, not absolutely centered like classic. */
+.desktop-titlebar--macos-unified .desktop-window-title {
+    position: static;
+    left: auto;
+    right: auto;
+    text-align: left;
+    font-size: 14px;
+    font-weight: 600;
+    margin-left: 8px;
+    pointer-events: none;
+}
+
+.macos-toolbar-items {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+    flex-shrink: 0;
+    color: #57575c;
+}
+
+.macos-toolbar-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 28px;
+    border: none;
+    border-radius: 6px;
+    background: none;
+    box-shadow: none;
+    min-width: 0;
+    padding: 0;
+    color: inherit;
+}
+
+.macos-toolbar-item svg {
+    width: 17px;
+    height: 17px;
+}
+
+.macos-toolbar-item--active {
+    background: rgba(0, 0, 0, 0.08);
+}
+
+.macos-toolbar-sep {
+    width: 1px;
+    height: 20px;
+    background: var(--macos-border);
+    margin: 0 4px;
+}
+
+/* ── Menu bar strip (screen-top; menu-open steps ONLY) ────────────────────── */
+
+/* The stage is a flex ROW by default — this modifier stacks strip-then-window. */
+body.desktop-stage.macos-stage--menubar {
+    flex-direction: column;
+    align-items: center;
+    padding-top: 0;
+}
+
+.macos-menubar {
+    align-self: stretch;
+    margin: 0 -48px 48px;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    height: 25px;
+    padding: 0 16px;
+    background: rgba(246, 246, 246, 0.96);
+    border-bottom: 1px solid var(--macos-border);
+    font-size: 13px;
+    color: #1d1d1f;
+    /* explicit stacking so the dropdown paints over the later-DOM window */
+    position: relative;
+    z-index: 5000;
+}
+
+/* The  glyph is drawn, not typed (U+F8FF is private-use and font-dependent). */
+.macos-menubar-apple {
+    width: 13px;
+    height: 15px;
+    margin-right: 10px;
+    background: #1d1d1f;
+    -webkit-mask: radial-gradient(circle at 65% 28%, transparent 3px, #000 3.5px) content-box;
+    mask: radial-gradient(circle at 65% 28%, transparent 3px, #000 3.5px) content-box;
+    border-radius: 45% 55% 48% 52% / 60% 60% 40% 40%;
+}
+
+.macos-menubar-item {
+    padding: 3px 10px;
+    border-radius: 4px;
+    position: relative;
+    white-space: nowrap;
+}
+
+.macos-menubar-item--app {
+    font-weight: 700;
+}
+
+.macos-menubar-item.macos-menu-open {
+    background: var(--macos-accent);
+    color: #ffffff;
+}
+
+/* ── Menus (dropdown from the menubar; also context menus) ────────────────── */
+
+.macos-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 240px;
+    padding: 5px;
+    margin: 1px 0 0;
+    list-style: none;
+    background: rgba(246, 246, 246, 0.98);
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
+    color: #1d1d1f;
+    z-index: 6000;
+}
+
+.macos-menu-open > .macos-menu {
+    display: block;
+}
+
+.macos-menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 28px;
+    padding: 4px 10px;
+    border-radius: 5px;
+    white-space: nowrap;
+    font-size: 13px;
+}
+
+.macos-menu-item--hover {
+    background: var(--macos-accent);
+    color: #ffffff;
+}
+
+.macos-menu-item--disabled {
+    color: rgba(29, 29, 31, 0.35);
+}
+
+.macos-menu-shortcut {
+    color: var(--macos-text-secondary);
+    letter-spacing: 1px;
+}
+
+.macos-menu-item--hover .macos-menu-shortcut {
+    color: inherit;
+}
+
+.macos-menu-divider {
+    height: 1px;
+    margin: 5px 10px;
+    background: rgba(0, 0, 0, 0.1);
+    list-style: none;
+}
+
+/* Submenu rows: single row + drawn cascade arrow — never inline children. */
+.macos-menu-sub::after {
+    content: '';
+    width: 0;
+    height: 0;
+    border-left: 4px solid currentColor;
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    margin-left: 12px;
+}
+
+/* Secondary windows (Preferences, About, utility panels) are much smaller
+ * than the fixed 1480×900 main window — this modifier lets them size to
+ * content. Standalone in the stage (a real macOS Preferences window is its
+ * own window, not an overlay). */
+.desktop-window.macos-window--compact {
+    width: auto;
+    height: auto;
+    min-width: 560px;
+    max-width: 860px;
+}
+
+/* ── App scaffold ─────────────────────────────────────────────────────────── */
+
+.macos-source-list {
+    flex-shrink: 0;
+    width: 200px;
+    background: var(--macos-sidebar-bg);
+    border-right: 1px solid var(--macos-border);
+    padding: 10px 8px;
+    box-sizing: border-box;
+    font-size: 13px;
+}
+
+.macos-source-item {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    padding: 5px 9px;
+    border-radius: 6px;
+    color: #1d1d1f;
+}
+
+.macos-source-item--selected {
+    background: rgba(0, 0, 0, 0.08);
+    font-weight: 600;
+}
+
+/* Icon+label tab strip (Inspector tabs, Preferences toolbar-tabs) — the real
+ * macOS pattern is a segmented row of icon-over-label buttons, not text pills;
+ * a deterministic class beats improvised chips (the .tui-panel lesson). */
+.macos-tab-strip {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    gap: 4px;
+    padding: 6px 10px;
+    background: #ececee;
+    border-bottom: 1px solid var(--macos-border);
+}
+
+.macos-tab {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3px;
+    min-width: 58px;
+    padding: 4px 10px;
+    border-radius: 7px;
+    font-size: 11px;
+    color: var(--macos-text-secondary);
+}
+
+.macos-tab svg {
+    width: 17px;
+    height: 17px;
+}
+
+.macos-tab--selected {
+    background: rgba(0, 0, 0, 0.1);
+    color: #1d1d1f;
+    font-weight: 600;
+}
+
+.macos-filterbar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 12px;
+    background: #ececee;
+    border-bottom: 1px solid var(--macos-border);
+    font-size: 12px;
+    color: var(--macos-text-secondary);
+}
+
+.macos-filter-chip {
+    padding: 2px 10px;
+    border-radius: 9px;
+}
+
+.macos-filter-chip--active {
+    background: rgba(0, 0, 0, 0.14);
+    color: #1d1d1f;
+    font-weight: 600;
+}
+
+/* NSTableView stand-in: header row + striped rows. */
+.macos-table {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    background: #ffffff;
+    font-size: 13px;
+}
+
+.macos-table-header {
+    display: flex;
+    padding: 4px 12px;
+    border-bottom: 1px solid var(--macos-border);
+    background: #f9f9fa;
+    color: var(--macos-text-secondary);
+    font-size: 11px;
+    font-weight: 600;
+}
+
+.macos-table-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-bottom: 1px solid #f0f0f2;
+}
+
+.macos-table-row--alt {
+    background: var(--macos-row-alt);
+}
+
+.macos-table-row--selected {
+    background: var(--macos-accent);
+    color: #ffffff;
+}
+
+/* Cell-based list rows (the NSOutlineView/NSTableView CELL pattern — most mac
+ * app main windows are cell lists, NOT column grids; .macos-table-header is
+ * only for real data grids). One .macos-list-cell per row; sub-elements match
+ * the view's recorded row_anatomy. */
+.macos-list-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 9px 14px;
+    border-bottom: 1px solid #f0f0f2;
+}
+
+.macos-list-cell--alt {
+    background: var(--macos-row-alt);
+}
+
+.macos-list-cell--selected {
+    background: var(--macos-accent);
+    color: #ffffff;
+}
+
+.macos-list-cell-title {
+    font-weight: 600;
+    font-size: 13px;
+}
+
+.macos-list-progress {
+    height: 5px;
+    background: #e4e4e8;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.macos-list-progress-fill {
+    height: 100%;
+    background: var(--macos-accent);
+    border-radius: 3px;
+}
+
+.macos-list-cell-status {
+    font-size: 11px;
+    color: var(--macos-text-secondary);
+}
+
+.macos-list-cell--selected .macos-list-cell-status {
+    color: rgba(255, 255, 255, 0.85);
+}
+
+.macos-statusbar {
+    flex-shrink: 0;
+    /* margin-top:auto pins the bar to the window bottom even when the client
+     * area doesn't flex-grow (the win32 round-2 floating-statusbar lesson). */
+    margin-top: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 12px;
+    background: #ececee;
+    border-top: 1px solid var(--macos-border);
+    font-size: 11px;
+    color: var(--macos-text-secondary);
+}
+
+/* ── Sheets (NSWindow sheets attach under the titlebar; nothing dims) ─────── */
+
+.macos-sheet {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 420px;
+    background: #f2f2f4;
+    border-radius: 0 0 10px 10px;
+    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
+    padding: 18px 20px 16px;
+    z-index: 800;
+}
+
+.macos-sheet-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 16px;
+}
+
+/* ── Popover (with drawn arrow) ───────────────────────────────────────────── */
+
+.macos-popover {
+    position: absolute;
+    background: #f6f6f8;
+    border: 1px solid rgba(0, 0, 0, 0.14);
+    border-radius: 10px;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+    padding: 14px;
+    z-index: 900;
+}
+
+.macos-popover::before {
+    content: '';
+    position: absolute;
+    top: -7px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    width: 12px;
+    height: 12px;
+    background: #f6f6f8;
+    border-left: 1px solid rgba(0, 0, 0, 0.14);
+    border-top: 1px solid rgba(0, 0, 0, 0.14);
+}