foss-design 0.3.6 → 0.4.0

package/dist/viewer-lib/styles.css

@@ -542,6 +542,10 @@
     z-index: 50;
   }
 
+  .z-\[1\] {
+    z-index: 1;
+  }
+
   .z-\[60\] {
     z-index: 60;
   }
@@ -665,6 +669,11 @@
     height: calc(var(--spacing) * 3.5);
   }
 
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+
   .size-9 {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
@@ -705,6 +714,10 @@
     }
   }
 
+  .h-1 {
+    height: var(--spacing);
+  }
+
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -749,6 +762,10 @@
     height: calc(var(--spacing) * 10);
   }
 
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
@@ -821,6 +838,10 @@
     max-height: 50vh;
   }
 
+  .max-h-\[82dvh\] {
+    max-height: 82dvh;
+  }
+
   .max-h-\[96px\] {
     max-height: 96px;
   }
@@ -861,6 +882,10 @@
     min-height: 46px;
   }
 
+  .min-h-\[48px\] {
+    min-height: 48px;
+  }
+
   .min-h-\[50vh\] {
     min-height: 50vh;
   }
@@ -955,6 +980,10 @@
     width: 100%;
   }
 
+  .w-max {
+    width: max-content;
+  }
+
   .w-px {
     width: 1px;
   }
@@ -1247,10 +1276,18 @@
     overflow-x: auto;
   }
 
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
   .overflow-y-auto {
     overflow-y: auto;
   }
 
+  .overscroll-contain {
+    overscroll-behavior: contain;
+  }
+
   .rounded-\[1px\] {
     border-radius: 1px;
   }
@@ -1287,6 +1324,11 @@
     border-radius: 3.40282e38px;
   }
 
+  .rounded-t-\[14px\] {
+    border-top-left-radius: 14px;
+    border-top-right-radius: 14px;
+  }
+
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1649,6 +1691,10 @@
     padding-top: calc(var(--spacing) * 1.5);
   }
 
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+
   .pt-2\.5 {
     padding-top: calc(var(--spacing) * 2.5);
   }
@@ -1669,6 +1715,10 @@
     padding-top: 12vh;
   }
 
+  .pt-\[env\(safe-area-inset-top\)\] {
+    padding-top: env(safe-area-inset-top);
+  }
+
   .pr-1\.5 {
     padding-right: calc(var(--spacing) * 1.5);
   }
@@ -1709,6 +1759,18 @@
     padding-bottom: calc(var(--spacing) * 7);
   }
 
+  .pb-\[env\(safe-area-inset-bottom\)\] {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .pb-\[max\(6px\,env\(safe-area-inset-bottom\)\)\] {
+    padding-bottom: max(6px, env(safe-area-inset-bottom));
+  }
+
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
@@ -1775,6 +1837,10 @@
     font-size: 13px;
   }
 
+  .text-\[14\.5px\] {
+    font-size: 14.5px;
+  }
+
   .text-\[14px\] {
     font-size: 14px;
   }
@@ -2183,6 +2249,10 @@
     outline-offset: -2px;
   }
 
+  .active\:bg-soft2:active {
+    background-color: var(--soft2);
+  }
+
   .disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
@@ -2268,10 +2338,24 @@
   }
 
   @media not all and (min-width: 48rem) {
+    .max-md\:flex {
+      display: flex;
+    }
+
     .max-md\:hidden {
       display: none;
     }
 
+    .max-md\:w-ctrl\! {
+      width: 32px !important;
+    }
+
+    @media (max-width: 767px) {
+      .max-md\:w-ctrl\! {
+        width: 40px !important;
+      }
+    }
+
     .max-md\:flex-col {
       flex-direction: column;
     }
@@ -2280,10 +2364,27 @@
       align-items: stretch;
     }
 
+    .max-md\:justify-center {
+      justify-content: center;
+    }
+
     .max-md\:gap-3 {
       gap: calc(var(--spacing) * 3);
     }
 
+    .max-md\:border-0 {
+      border-style: var(--tw-border-style);
+      border-width: 0;
+    }
+
+    .max-md\:bg-transparent {
+      background-color: #0000;
+    }
+
+    .max-md\:p-0 {
+      padding: 0;
+    }
+
     .max-md\:px-4 {
       padding-inline: calc(var(--spacing) * 4);
     }

package/dist/viewer-lib/types/viewer/src/lib/phone.d.ts

@@ -0,0 +1 @@
+export declare function useIsPhone(): boolean;

package/dist/viewer-lib/types/viewer/src/library.d.ts

@@ -6,6 +6,7 @@ export { Bar } from './components/topbar';
 export { Mark, Wordmark } from './components/wordmark';
 export { cn } from './lib/cn';
 export { copyText } from './lib/copy';
+export { useIsPhone } from './lib/phone';
 export { ApiError, localSource, resolveUrl, staticSource, type ViewerSource } from './lib/source';
 export { setThemePref, type ThemePref, useTheme, useThemePref } from './lib/theme';
 export type { ViewerScope, ViewerSlots } from './lib/viewer';
@@ -19,6 +20,7 @@ export { floatingSurface, Menu, MenuItem, MenuLabel, MenuSeparator, menuItemClas
 export { Meter } from './ui/meter';
 export { Content, type NavItem, NavLabel, Notice, NoticeCard, PageHead, SubNav } from './ui/page';
 export { GroupRow, KV, Panel, PanelBody, PanelFoot, PanelHead, PanelTabs, Row, RowLink, type RowProps, Strip, THead, } from './ui/panel';
+export { Sheet } from './ui/sheet';
 export { Skeleton, SkeletonRows } from './ui/skeleton';
 export { Kbd, Mono, Muted, Two } from './ui/text';
 export { TextArea, type TextAreaProps, TextField, type TextFieldProps } from './ui/text-field';

package/dist/viewer-lib/types/viewer/src/pages/canvas/phone-view.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A canvas on a phone: no board to pan, one screen at a time as in play mode. The screen fills
+ * the width and scrolls; the bottom bar steps through every screen of the canvas and opens the
+ * list of them. Serves `/c/:canvas`, its pages and `/c/:canvas/play/:item` under 768px.
+ */
+export declare function PhoneCanvas({ canvasId, pageId, itemId }: {
+    canvasId: string;
+    pageId?: string;
+    itemId?: string;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/canvas/play-page.d.ts

@@ -1,4 +1,14 @@
+import type { CanvasDoc, ScreenItem, UrlItem } from '../../../../src/shared/types';
+type Frame = ScreenItem | UrlItem;
+export interface Entry {
+    item: Frame;
+    pageId: string;
+    where: string;
+}
+export declare function framesOf(canvas: CanvasDoc, pageId: string | null): Entry[];
+export declare const playHref: (canvas: string, item: string, page: string) => string;
 export declare function PlayPage({ canvasId, itemId }: {
     canvasId: string;
     itemId: string;
 }): import("react").JSX.Element | null;
+export {};

package/dist/viewer-lib/types/viewer/src/ui/sheet.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+/**
+ * A panel sliding up from the bottom edge, for phones: lists to pick from and actions. Like
+ * Dialog, focus stays inside, and Escape, a tap on the dimmed page or the close button close it.
+ */
+export declare function Sheet({ open, onOpenChange, title, children, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foss-design",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "Design canvases and design systems for coding agents: live, animated, clickable screens on an infinite canvas, served locally from a .design folder.",
   "type": "module",
   "license": "MIT",