@swiftbrowser/react 0.0.0-stage → 0.4.0

package/dist/presentation.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Sheets and alerts: presented content becomes a root-level `sheet` / `alert`
+ * element after the app's tree, as the Swift core emits them.
+ */
+import type { Detent } from '@swiftbrowser/web/src/protocol';
+import { type ReactNode } from 'react';
+import { type BindingValue } from './binding';
+export interface SheetModifier {
+    isPresented: BindingValue<boolean>;
+    onDismiss?: () => void;
+    content: ReactNode;
+    /** `.fullScreenCover` */
+    fullScreen?: boolean;
+}
+export declare function SheetPresenter({ isPresented, onDismiss, content, fullScreen }: SheetModifier): ReactNode;
+/** `.presentationDetents([.medium])`, inside a sheet's content. */
+export type DetentValue = Detent | {
+    height: number;
+} | {
+    fraction: number;
+};
+export declare function presentationDetents(detents: DetentValue[]): ReactNode;
+export interface AlertModifier {
+    title: string;
+    isPresented: BindingValue<boolean>;
+    message?: string;
+    /** The buttons; each dismisses the alert when tapped. */
+    actions?: ReactNode;
+    /** `.confirmationDialog` */
+    style?: 'alert' | 'dialog';
+}
+export declare function AlertPresenter({ title, isPresented, message, actions, style }: AlertModifier): ReactNode;
+/** `.onAppear` / `.onDisappear` */
+export declare function Lifecycle({ onAppear, onDisappear }: {
+    onAppear?: () => void;
+    onDisappear?: () => void;
+}): null;
+//# sourceMappingURL=presentation.d.ts.map

package/dist/presentation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation.d.ts","sourceRoot":"","sources":["../src/presentation.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAe,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAM3D,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,aAAa,GAAG,SAAS,CAsBxG;AAED,mEAAmE;AACnE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE7E,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,CAKrE;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,aAAa,GAAG,SAAS,CAgBxG;AAED,mCAAmC;AACnC,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,GAAG,IAAI,CAO9G"}

package/dist/scrollReader.d.ts

@@ -0,0 +1,27 @@
+/**
+ * `ScrollViewReader` and `.id` (the `scrollID` modifier): `proxy.scrollTo(id)`
+ * marks the view with that id with a `scrollTo` command whose serial is new,
+ * and the page scrolls every scrolling ancestor to it after the pass.
+ */
+import type { UnitPoint } from '@swiftbrowser/web/src/protocol';
+import { type ReactNode } from 'react';
+import { type UnitPointValue } from './values';
+interface ScrollRequest {
+    id: string | number;
+    anchor: UnitPoint | null;
+    serial: number;
+}
+export declare const ScrollRequestContext: import("react").Context<ScrollRequest | null>;
+export interface ScrollViewProxy {
+    /** Scroll so `anchor` of the view with that `scrollID` meets the same point of the visible area; no anchor: as little as shows it. */
+    scrollTo(id: string | number, anchor?: UnitPointValue): void;
+}
+export declare function ScrollViewReader({ children }: {
+    children: (proxy: ScrollViewProxy) => ReactNode;
+}): ReactNode;
+export declare function ScrollTarget({ id, children }: {
+    id: string | number;
+    children?: ReactNode;
+}): ReactNode;
+export {};
+//# sourceMappingURL=scrollReader.d.ts.map

package/dist/scrollReader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollReader.d.ts","sourceRoot":"","sources":["../src/scrollReader.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1D,UAAU,aAAa;IACrB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,oBAAoB,+CAA4C,CAAC;AAG9E,MAAM,WAAW,eAAe;IAC9B,sIAAsI;IACtI,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;CAC9D;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAA;CAAE,GAAG,SAAS,CAM7G;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAIvG"}

package/dist/values.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Value types of the SwiftUI API as plain data: colors and shape styles,
+ * fonts, frames, insets and gradients, encoded as the ops protocol wants them.
+ */
+import type { Color as ProtocolColor, EdgeInsets, Font as ProtocolFont, FontDesign, FontWeight, Frame, FrameAlignment, RGBAColor, SemanticColorName, ShapeStyle, TextStyle, UnitPoint } from '@swiftbrowser/web/src/protocol';
+export type { EdgeInsets, FontDesign, FontWeight, Frame, FrameAlignment, ShapeStyle, TextStyle, UnitPoint };
+/** The protocol's color value (the `Color` export is the view, with the color helpers as members). */
+export type ColorType = ProtocolColor;
+/** The protocol's font value (the `Font` export is the helper object). */
+export type FontType = ProtocolFont;
+/** `.primary` … `.quaternary` as foreground styles (the label colors) or fills. */
+export type HierarchyName = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+/**
+ * A style as a prop: a protocol value, or a name. A hierarchy name
+ * (`"secondary"`) is the hierarchical style, as `.foregroundStyle(.secondary)`
+ * is; a palette or UIKit name (`"red"`, `"secondarySystemBackground"`) is that
+ * semantic color; `"white"`, `"black"` and `"#rrggbb[aa]"` are explicit colors.
+ */
+export type StyleValue = ShapeStyle | HierarchyName | SemanticColorName | 'white' | 'black' | `#${string}`;
+export declare function rgb(r: number, g: number, b: number, a?: number): RGBAColor;
+export declare function hex(value: string): RGBAColor;
+export declare function shapeStyle(value: StyleValue): ShapeStyle;
+/** A color as a prop: a protocol color or a name (hierarchy names are not colors). */
+export type ColorValue = ProtocolColor | SemanticColorName | 'white' | 'black' | `#${string}`;
+export declare function color(value: ColorValue): ProtocolColor;
+/** `color.opacity(a)` */
+export declare function opacity(value: ColorValue, a: number): ProtocolColor;
+export declare function opacity(value: StyleValue, a: number): ShapeStyle;
+/** `color.gradient`: the subtle vertical gradient iOS derives from a color. */
+export declare function gradient(value: ColorValue): ShapeStyle;
+/** `Color.red`, `Color.white`, `Color(.secondarySystemBackground)`… (`Color` itself, a view, carries these as members). */
+export declare const ColorValues: {
+    red: ProtocolColor;
+    orange: ProtocolColor;
+    yellow: ProtocolColor;
+    green: ProtocolColor;
+    mint: ProtocolColor;
+    teal: ProtocolColor;
+    cyan: ProtocolColor;
+    blue: ProtocolColor;
+    indigo: ProtocolColor;
+    purple: ProtocolColor;
+    pink: ProtocolColor;
+    brown: ProtocolColor;
+    gray: ProtocolColor;
+    white: ProtocolColor;
+    black: ProtocolColor;
+    clear: ProtocolColor;
+    primary: ProtocolColor;
+    secondary: ProtocolColor;
+    accent: ProtocolColor;
+    /** `Color(uiColor:)` / `Color(.name)`: a UIKit semantic color by its iOS name. */
+    system: (name: SemanticColorName) => ProtocolColor;
+    rgb: typeof rgb;
+    hex: typeof hex;
+    opacity: typeof opacity;
+    gradient: typeof gradient;
+};
+export type UnitPointName = 'center' | 'top' | 'bottom' | 'leading' | 'trailing' | 'topLeading' | 'topTrailing' | 'bottomLeading' | 'bottomTrailing';
+export type UnitPointValue = UnitPoint | UnitPointName;
+export declare function unitPoint(value: UnitPointValue): UnitPoint;
+export interface GradientColors {
+    /** Evenly spaced colors, or explicit stops. */
+    colors?: ColorValue[];
+    stops?: {
+        color: ColorValue;
+        location: number;
+    }[];
+}
+export declare function LinearGradient(spec: GradientColors & {
+    startPoint: UnitPointValue;
+    endPoint: UnitPointValue;
+}): ShapeStyle;
+export declare function RadialGradient(spec: GradientColors & {
+    center: UnitPointValue;
+    startRadius: number;
+    endRadius: number;
+}): ShapeStyle;
+export declare function AngularGradient(spec: GradientColors & {
+    center: UnitPointValue;
+    startAngle?: number;
+    endAngle?: number;
+}): ShapeStyle;
+/** A font as a prop: a text style name (`"headline"`) or a `Font` object. */
+export type FontValue = TextStyle | ProtocolFont;
+export declare function font(value: FontValue): ProtocolFont;
+/** `Font.system(size:weight:design:)` */
+export declare function system(size: number, weight?: FontWeight, design?: FontDesign): ProtocolFont;
+/** `Font.system(.body, design:weight:)` */
+export declare function system(textStyle: TextStyle, design?: FontDesign, weight?: FontWeight): ProtocolFont;
+/** `.font(.title2.bold())`, `.font(.subheadline.weight(.semibold))` */
+export declare function weighted(value: FontValue, weight: FontWeight): ProtocolFont;
+export declare const Font: {
+    system: typeof system;
+    weighted: typeof weighted;
+    bold: (value: FontValue) => ProtocolFont;
+};
+/** `Infinity` stands for `.infinity`. */
+export interface FrameValue {
+    width?: number;
+    height?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    alignment?: FrameAlignment;
+}
+export declare function frame(value: FrameValue): Frame;
+export type EdgeName = 'top' | 'bottom' | 'leading' | 'trailing' | 'horizontal' | 'vertical' | 'all';
+/**
+ * `.padding()` (`true`), `.padding(12)`, `.padding(.vertical, 6)` (`["vertical", 6]`),
+ * `.padding([.top, .leading], 8)`, or explicit insets.
+ */
+export type PaddingValue = true | number | EdgeInsets | [EdgeName | EdgeName[], number?];
+export declare const DEFAULT_PADDING = 16;
+export declare function padding(value: PaddingValue): EdgeInsets;
+export declare function insets(edges: EdgeName[], amount: number): EdgeInsets;
+//# sourceMappingURL=values.d.ts.map

package/dist/values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"values.d.ts","sourceRoot":"","sources":["../src/values.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,49 @@
 {
   "name": "@swiftbrowser/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.4.0",
+  "type": "module",
+  "description": "SwiftUI's components for React: a react-reconciler host that emits SwiftBrowser render ops into the @swiftbrowser/web renderer, so a pure React/TypeScript web app gets the same iOS UI as a SwiftUI app in the browser.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/noya-app/SwiftBrowser.git",
+    "directory": "packages/react"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit -p tsconfig.json && vite build --config vite.lib.config.ts && tsc -p tsconfig.build.json",
+    "build:demo": "vite build",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test:unit": "vitest run"
+  },
+  "dependencies": {
+    "@swiftbrowser/web": "0.4.0",
+    "react-reconciler": "^0.34.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@types/react-reconciler": "^0.33.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.7",
+    "vitest": "^5.0.3"
+  }
+}