@phreshos/react-ui 0.1.2 → 0.1.4

package/README.md

@@ -120,36 +120,14 @@ const colors = useColor(theme.accent)
 <strong style={{ color: colors.strong }} />
 ```
 
-`GlassSurface` is the shared translucent material. The Theme supplies its
-background, foreground, and concrete default values for distortion, blur,
-saturation, brightness, and material opacity. The component derives its tint
-from the background and applies the foreground to its content, while accent
-remains independent for emphasis and interaction. The surface may also derive
-a small or large treatment from each numeric default without turning those
-levels into system state.
-
-Derived opacity is capped at thirty percent and never fades the surface's
-content. Layout, spacing, radius, and external elevation remain ordinary
-container concerns:
-
-```tsx
-<GlassSurface className="rounded-xl p-3">
-  ...
-</GlassSurface>
-
-<GlassSurface color="soft" distortion="large" blur="small" opacity="medium">
-  ...
-</GlassSurface>
-```
-
 Shape-owning components accept the shared `Radius` value directly. Semantic
 levels are derived from the Theme's concrete radius through the same
 `scale()` rule used for spacing, while numbers and CSS values remain explicit
 overrides:
 
 ```tsx
-<GlassSurface radius="large">...</GlassSurface>
-<GlassSurface radius="2rem">...</GlassSurface>
+<Button radius="large">...</Button>
+<Button radius="2rem">...</Button>
 ```
 
 Structures whose native element owns the shape derive from the explicit

package/dist/main.d.ts

@@ -8,7 +8,6 @@ export { ThemeProvider, useTheme, type ThemeProviderProps } from "./theme-provid
 export { Flex, type FlexProps } from "./flex.js";
 export { Grid, type GridProps } from "./grid.js";
 export { Surface, type SurfaceColor, type SurfaceProps } from "./surface.js";
-export { GlassSurface, type GlassSurfaceProps } from "./glass-surface.js";
 export { Button, type ButtonProps } from "./button.js";
 export type { LayoutAlignment, LayoutGap, LayoutJustification } from "./layout.js";
 export { resolveRadius, type Radius, type RadiusProps } from "./radius.js";

package/dist/main.js

@@ -8,7 +8,6 @@ export { ThemeProvider, useTheme } from "./theme-provider.js";
 export { Flex } from "./flex.js";
 export { Grid } from "./grid.js";
 export { Surface } from "./surface.js";
-export { GlassSurface } from "./glass-surface.js";
 export { Button } from "./button.js";
 export { resolveRadius } from "./radius.js";
 export { resolveSpacing } from "./spacing.js";

package/dist/surface-material.js

@@ -26,12 +26,14 @@ export function SurfaceMaterial({ animation, color, grain, opacity }) {
             height: "100%",
             overflow: "hidden",
             borderRadius: "inherit",
+            border: "1px solid rgba(15, 17, 21, 0.08)",
+            boxSizing: "border-box",
             opacity,
             pointerEvents: "none"
         }, children: [_jsx("defs", { children: _jsx("pattern", { id: identity, width: patternSize, height: patternSize, patternUnits: "userSpaceOnUse", children: initial.map((path, tone) => {
                         const channel = Math.round(tone / (toneCount - 1) * 255);
                         return _jsx("path", { ref: node => { paths.current[tone] = node; }, "data-surface-grain-tone": tone, d: path, fill: `rgb(${channel}, ${channel}, ${channel})`, shapeRendering: "crispEdges" }, tone);
-                    }) }) }), _jsx("rect", { "data-surface-base": "", width: "100%", height: "100%", fill: color }), _jsx("rect", { "data-surface-grain": "", width: "100%", height: "100%", fill: `url(#${identity})`, opacity: grain, shapeRendering: "crispEdges" }), _jsx("rect", { "data-surface-edge": "", width: "100%", height: "100%", fill: "none", stroke: "rgb(15, 17, 21)", strokeOpacity: "0.08", strokeWidth: "2", vectorEffect: "non-scaling-stroke" })] });
+                    }) }) }), _jsx("rect", { "data-surface-base": "", width: "100%", height: "100%", fill: color }), _jsx("rect", { "data-surface-grain": "", width: "100%", height: "100%", fill: `url(#${identity})`, opacity: grain, shapeRendering: "crispEdges" })] });
 }
 class AnimationClock {
     #entries = new Set();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -52,7 +52,7 @@
     "prepack": "node --run test && node --run build"
   },
   "peerDependencies": {
-    "@phreshos/core": "^0.1.7",
+    "@phreshos/core": "^0.1.8",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@base-ui/react": "^1.7.0",
-    "@phreshos/core": "^0.1.7",
+    "@phreshos/core": "^0.1.8",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",

package/dist/glass-surface.d.ts

@@ -1,34 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-import { type Colorable, type ColorLevel, type ScaleLevel } from "@phreshos/core";
-import { type RadiusProps } from "./radius.js";
-/** Native properties accepted by the shared glass container. */
-export type GlassSurfaceProps = ComponentPropsWithoutRef<"div"> & Colorable<ColorLevel> & RadiusProps & Readonly<{
-    /** Distortion derived from the Theme's concrete default. */
-    distortion?: ScaleLevel;
-    /** Blur derived from the Theme's concrete default. */
-    blur?: ScaleLevel;
-    /** Saturation derived from the Theme's concrete default. */
-    saturation?: ScaleLevel;
-    /** Brightness derived from the Theme's concrete default. */
-    brightness?: ScaleLevel;
-    /** Material opacity derived from the Theme's concrete default. */
-    opacity?: ScaleLevel;
-}>;
-/**
- * Contains content within the shared refracted glass material.
- *
- * Layout, spacing, radius, and external elevation remain the responsibility of
- * the containing interface. Only the material itself is owned here.
- */
-export declare const GlassSurface: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Colorable<ColorLevel> & RadiusProps & Readonly<{
-    /** Distortion derived from the Theme's concrete default. */
-    distortion?: ScaleLevel;
-    /** Blur derived from the Theme's concrete default. */
-    blur?: ScaleLevel;
-    /** Saturation derived from the Theme's concrete default. */
-    saturation?: ScaleLevel;
-    /** Brightness derived from the Theme's concrete default. */
-    brightness?: ScaleLevel;
-    /** Material opacity derived from the Theme's concrete default. */
-    opacity?: ScaleLevel;
-}> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/glass-surface.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
-import { color as deriveColor, scale, scaleMultiplier, themeLimits } from "@phreshos/core";
-import { colorOpacity } from "./color.js";
-import { resolveRadius } from "./radius.js";
-import { useTheme } from "./theme-provider.js";
-const shell = "inset 1px 1px 0 rgba(255, 255, 255, 0.7), inset -1px -1px 0 rgba(255, 255, 255, 0.28)";
-/**
- * Contains content within the shared refracted glass material.
- *
- * Layout, spacing, radius, and external elevation remain the responsibility of
- * the containing interface. Only the material itself is owned here.
- */
-export const GlassSurface = forwardRef(function GlassSurface({ blur = "medium", brightness = "medium", children, color = "base", distortion = "medium", opacity = "medium", radius, saturation = "medium", style, ...properties }, ref) {
-    const theme = useTheme();
-    const filter = `phresh-glass-${useId().replaceAll(":", "")}`;
-    const backdrop = glassBackdrop(theme.glass, { blur, brightness, saturation });
-    const alpha = boundedOpacity(scale(theme.glass.opacity, opacity));
-    const tint = deriveColor(theme.background)[color];
-    const borderRadius = resolveRadius(radius, theme);
-    return _jsxs("div", { ...properties, ref: ref, style: {
-            ...style,
-            ...(borderRadius === undefined ? {} : { borderRadius }),
-            color: theme.foreground,
-            backgroundColor: colorOpacity(tint, alpha),
-            backgroundImage: `linear-gradient(to bottom, ${colorOpacity(tint, boundedOpacity(alpha * 5 / 3))}, ${colorOpacity(tint, boundedOpacity(alpha / 2))})`,
-            boxShadow: shell,
-            backdropFilter: `url(#${filter}) ${backdrop}`,
-            WebkitBackdropFilter: backdrop,
-            isolation: "isolate",
-            overflow: "hidden"
-        }, children: [_jsx("svg", { "aria-hidden": "true", width: "0", height: "0", style: { position: "absolute" }, children: _jsxs("filter", { id: filter, x: "0%", y: "0%", width: "100%", height: "100%", children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.008 0.008", numOctaves: "2", seed: "92", result: "noise" }), _jsx("feGaussianBlur", { in: "noise", stdDeviation: "2", result: "blurred" }), _jsx("feDisplacementMap", { in: "SourceGraphic", in2: "blurred", scale: scale(theme.glass.distortion, distortion), xChannelSelector: "R", yChannelSelector: "G" })] }) }), children] });
-});
-function glassBackdrop(glass, levels) {
-    return `blur(${scale(glass.blur, levels.blur)}px) saturate(${scaleMultiplier(glass.saturation, levels.saturation)}) brightness(${scaleMultiplier(glass.brightness, levels.brightness)})`;
-}
-/** Keeps every derived tint within the system's maximum glass opacity. */
-function boundedOpacity(value) {
-    return Math.round(Math.min(themeLimits.glass.opacity.maximum, Math.max(0, value)) * 10_000) / 10_000;
-}