@dalcvil/steam-green-react 0.1.0 → 0.2.0

package/LICENSE

@@ -1,25 +1,25 @@
-MIT License
-
-Copyright (c) 2026 Dalcvi
-
-This project contains styles derived from VGUI.css
-(https://github.com/AlpyneDreams/vgui.css), Copyright (c) 2021 Jeffrey Ellison,
-licensed under the MIT License.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Dalcvi
+
+This project contains styles derived from VGUI.css
+(https://github.com/AlpyneDreams/vgui.css), Copyright (c) 2021 Jeffrey Ellison,
+licensed under the MIT License.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -43,6 +43,7 @@ import.
 | Component | Description |
 | --- | --- |
 | `GreenButton` | Classic VGUI push button. Supports `fullWidth` on top of all `<button>` props. |
+| `GreenPanel` | VGUI container with the beveled border and an optional uppercase title bar. Supports `inset` and `rounded`. |
 
 More components are on the way; each one will get its own CSS file plus a
 Storybook story.
@@ -91,6 +92,8 @@ src/
       GreenButton.css         # colocated styles, imported by the component
       GreenButton.stories.tsx
       index.ts
+    GreenPanel/
+      ...
 ```
 
 To add a component: create a folder under `src/components/`, export it from its
@@ -102,7 +105,7 @@ own `index.ts` **and** from `src/index.ts`, and add a story next to it.
 | --- | --- | --- |
 | `.github/workflows/ci.yml` | push to `main`, PRs | Typechecks, builds the library and Storybook, uploads `dist` as an artifact. |
 | `.github/workflows/pages.yml` | push to `main` | Builds Storybook and deploys it to GitHub Pages. |
-| `.github/workflows/release.yml` | push to `main` | Opens/updates the *“chore: version packages”* PR, then publishes to npm **with provenance** and creates the GitHub release once that PR is merged. |
+| `.github/workflows/release.yml` | **CI** finishing successfully on `main` | Opens/updates the *“chore: version packages”* PR, then publishes to npm **with provenance** and creates the GitHub release once that PR is merged. Never runs on a plain push, so a red CI run cannot release. |
 
 ### Releasing
 
@@ -124,8 +127,8 @@ Releases are managed by [Changesets](https://changesets.dev) — the version in
    creates a GitHub release.
 
 Nothing is published while no changeset exists, so `main` can sit unreleased
-indefinitely — with one exception: `@dalcvil/steam-green-react` is not on the
-registry yet, so the first release run publishes the current `0.1.0` directly.
+indefinitely. Releases are driven entirely by changesets — `0.1.0` was the one
+version published by hand, before trusted publishing existed.
 
 ### First-time setup
 
@@ -135,10 +138,18 @@ registry yet, so the first release run publishes the current `0.1.0` directly.
    default runs a Jekyll build that serves the README instead. Once the source
    is set, the Pages workflow publishes Storybook to
    `https://<owner>.github.io/<repo>/`.
-2. **npm publishing** — create an npm **Automation** token for the `@dalcvil`
-   scope and store it as the repository secret `NPM_TOKEN`
-   (**Settings → Secrets and variables → Actions**). The release workflow
-   exports it as `NODE_AUTH_TOKEN`, which `actions/setup-node` picks up.
+2. **npm publishing** — add a **trusted publisher** on npmjs.com
+   (**Packages → `@dalcvil/steam-green-react` → Settings → Trusted publishing →
+   GitHub Actions**) with repository `Dalcvi/steam-style-react`, workflow
+   `release.yml`, and *Environment* left blank. Let the connection perform a
+   direct publish, not a stage-only one — the release workflow publishes
+   unattended, so stage-only would leave every version waiting on manual 2FA
+   approval.
+
+   No token and no repository secret are involved: the workflow authenticates
+   over OIDC, and npm attaches provenance automatically. Once a release has
+   succeeded, tighten **Settings → Publishing access** to *Require two-factor
+   authentication and disallow tokens*.
 3. **Allow the version PR** — enable **Settings → Actions → General →
    *Allow GitHub Actions to create and approve pull requests***, otherwise the
    workflow cannot open the “chore: version packages” pull request.

package/dist/components/GreenButton/GreenButton.css

@@ -1,47 +1,47 @@
-/*
- * Green Steam button.
- *
- * The upstream VGUI.css targets the bare `button` element. As a component we
- * scope the same declarations to `.greensteam-button` so the component can be
- * dropped into any page without restyling every button on it.
- */
-
-.greensteam-button {
-  color: white;
-  background-color: #4c5844;
-  height: 25px;
-  min-width: 75px;
-  padding: 0 8px;
-  cursor: pointer;
-  border-top: solid 1px #899281;
-  border-bottom: solid 1px #292d23;
-  border-left: solid 1px #899281;
-  border-right: solid 1px #292d23;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: lighter;
-  text-align: left;
-  -webkit-font-smoothing: none;
-}
-
-.greensteam-button:active {
-  border-top: solid 1px #292d23;
-  border-bottom: solid 1px #899281;
-  border-left: solid 1px #292d23;
-  border-right: solid 1px #899281;
-}
-
-.greensteam-button:focus-visible {
-  outline: 1px dashed #292d23;
-  outline-offset: -4px;
-}
-
-.greensteam-button:disabled {
-  color: #8b9481;
-  cursor: default;
-}
-
-.greensteam-button--full-width {
-  display: block;
-  width: 100%;
-}
+/*
+ * Green Steam button.
+ *
+ * The upstream VGUI.css targets the bare `button` element. As a component we
+ * scope the same declarations to `.greensteam-button` so the component can be
+ * dropped into any page without restyling every button on it.
+ */
+
+.greensteam-button {
+  color: white;
+  background-color: #4c5844;
+  height: 25px;
+  min-width: 75px;
+  padding: 0 8px;
+  cursor: pointer;
+  border-top: solid 1px #899281;
+  border-bottom: solid 1px #292d23;
+  border-left: solid 1px #899281;
+  border-right: solid 1px #292d23;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: lighter;
+  text-align: left;
+  -webkit-font-smoothing: none;
+}
+
+.greensteam-button:active {
+  border-top: solid 1px #292d23;
+  border-bottom: solid 1px #899281;
+  border-left: solid 1px #292d23;
+  border-right: solid 1px #899281;
+}
+
+.greensteam-button:focus-visible {
+  outline: 1px dashed #292d23;
+  outline-offset: -4px;
+}
+
+.greensteam-button:disabled {
+  color: #8b9481;
+  cursor: default;
+}
+
+.greensteam-button--full-width {
+  display: block;
+  width: 100%;
+}

package/dist/components/GreenButton/GreenButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"GreenButton.js","names":[],"sources":["../../../src/components/GreenButton/GreenButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\r\nimport type { ButtonHTMLAttributes } from 'react'\r\n\r\nimport './GreenButton.css'\r\n\r\nexport interface GreenButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /** Stretch the button across the full width of its container. */\r\n  fullWidth?: boolean\r\n}\r\n\r\nexport const GreenButton = forwardRef<HTMLButtonElement, GreenButtonProps>(function GreenButton(\r\n  { className, type = 'button', fullWidth = false, ...rest },\r\n  ref,\r\n) {\r\n  const classes = ['greensteam-button']\r\n  if (fullWidth) classes.push('greensteam-button--full-width')\r\n  if (className) classes.push(className)\r\n\r\n  return <button ref={ref} type={type} className={classes.join(' ')} {...rest} />\r\n})\r\n\r\nGreenButton.displayName = 'GreenButton'\r\n"],"mappings":";;;;AAUA,IAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,WAAW,OAAO,UAAU,YAAY,OAAO,GAAG,QACpD,KACA;CACA,MAAM,UAAU,CAAC,mBAAmB;CACpC,IAAI,WAAW,QAAQ,KAAK,+BAA+B;CAC3D,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OAAO,oBAAC,UAAD;EAAa;EAAW;EAAM,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;CAAO,CAAA;AAChF,CAAC;AAED,YAAY,cAAc"}
+{"version":3,"file":"GreenButton.js","names":[],"sources":["../../../src/components/GreenButton/GreenButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { ButtonHTMLAttributes } from 'react'\n\nimport './GreenButton.css'\n\nexport interface GreenButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Stretch the button across the full width of its container. */\n  fullWidth?: boolean\n}\n\nexport const GreenButton = forwardRef<HTMLButtonElement, GreenButtonProps>(function GreenButton(\n  { className, type = 'button', fullWidth = false, ...rest },\n  ref,\n) {\n  const classes = ['greensteam-button']\n  if (fullWidth) classes.push('greensteam-button--full-width')\n  if (className) classes.push(className)\n\n  return <button ref={ref} type={type} className={classes.join(' ')} {...rest} />\n})\n\nGreenButton.displayName = 'GreenButton'\n"],"mappings":";;;;AAUA,IAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,WAAW,OAAO,UAAU,YAAY,OAAO,GAAG,QACpD,KACA;CACA,MAAM,UAAU,CAAC,mBAAmB;CACpC,IAAI,WAAW,QAAQ,KAAK,+BAA+B;CAC3D,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OAAO,oBAAC,UAAD;EAAa;EAAW;EAAM,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;CAAO,CAAA;AAChF,CAAC;AAED,YAAY,cAAc"}

package/dist/components/GreenPanel/GreenPanel.css

@@ -0,0 +1,45 @@
+/*
+ * Green Steam panel.
+ *
+ * Reproduces the upstream `.window` / `.box` container: a light-green body with
+ * the beveled VGUI border, plus the uppercase title bar upstream renders via
+ * `.window::before { content: attr(name) }`. Here the title bar is a real
+ * element, so the text is selectable and no attribute trick is needed.
+ */
+
+.greensteam-panel {
+  background-color: #4c5844;
+  padding: 10px;
+  box-sizing: border-box;
+  margin: 0 0 20px;
+  border-top: solid 1px #899281;
+  border-bottom: solid 1px #292d23;
+  border-left: solid 1px #899281;
+  border-right: solid 1px #292d23;
+}
+
+.greensteam-panel__titlebar {
+  display: block;
+  position: relative;
+  height: 18px;
+  line-height: 18px;
+  margin-bottom: 1em;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+
+.greensteam-panel--inset {
+  background-color: #3e4637;
+  border-top: solid 1px #292d23;
+  border-bottom: solid 1px #899281;
+  border-left: solid 1px #292d23;
+  border-right: solid 1px #899281;
+}
+
+.greensteam-panel--rounded {
+  border: none;
+  border-radius: 10px;
+}

package/dist/components/GreenPanel/GreenPanel.css.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/components/GreenPanel/GreenPanel.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import './GreenPanel.css';
+export interface GreenPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Uppercase VGUI title bar text. Omit it to render a panel without one. */
+    heading?: ReactNode;
+    /** Darken the body to the VGUI "inset" look, e.g. for read-only content. */
+    inset?: boolean;
+    /** Round the corners and drop the beveled border. */
+    rounded?: boolean;
+}
+export declare const GreenPanel: import("react").ForwardRefExoticComponent<GreenPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=GreenPanel.d.ts.map

package/dist/components/GreenPanel/GreenPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GreenPanel.d.ts","sourceRoot":"","sources":["../../../src/components/GreenPanel/GreenPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,kBAAkB,CAAA;AAEzB,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,UAAU,4GAerB,CAAA"}

package/dist/components/GreenPanel/GreenPanel.js

@@ -0,0 +1,24 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./GreenPanel.css";
+//#region src/components/GreenPanel/GreenPanel.tsx
+var GreenPanel = forwardRef(function GreenPanel({ className, heading, inset = false, rounded = false, children, ...rest }, ref) {
+	const classes = ["greensteam-panel"];
+	if (inset) classes.push("greensteam-panel--inset");
+	if (rounded) classes.push("greensteam-panel--rounded");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classes.join(" "),
+		...rest,
+		children: [heading != null && /* @__PURE__ */ jsx("div", {
+			className: "greensteam-panel__titlebar",
+			children: heading
+		}), children]
+	});
+});
+GreenPanel.displayName = "GreenPanel";
+//#endregion
+export { GreenPanel };
+
+//# sourceMappingURL=GreenPanel.js.map

package/dist/components/GreenPanel/GreenPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GreenPanel.js","names":[],"sources":["../../../src/components/GreenPanel/GreenPanel.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\n\nimport './GreenPanel.css'\n\nexport interface GreenPanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Uppercase VGUI title bar text. Omit it to render a panel without one. */\n  heading?: ReactNode\n  /** Darken the body to the VGUI \"inset\" look, e.g. for read-only content. */\n  inset?: boolean\n  /** Round the corners and drop the beveled border. */\n  rounded?: boolean\n}\n\nexport const GreenPanel = forwardRef<HTMLDivElement, GreenPanelProps>(function GreenPanel(\n  { className, heading, inset = false, rounded = false, children, ...rest },\n  ref,\n) {\n  const classes = ['greensteam-panel']\n  if (inset) classes.push('greensteam-panel--inset')\n  if (rounded) classes.push('greensteam-panel--rounded')\n  if (className) classes.push(className)\n\n  return (\n    <div ref={ref} className={classes.join(' ')} {...rest}>\n      {heading != null && <div className=\"greensteam-panel__titlebar\">{heading}</div>}\n      {children}\n    </div>\n  )\n})\n\nGreenPanel.displayName = 'GreenPanel'\n"],"mappings":";;;;AAcA,IAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,SAAS,QAAQ,OAAO,UAAU,OAAO,UAAU,GAAG,QACnE,KACA;CACA,MAAM,UAAU,CAAC,kBAAkB;CACnC,IAAI,OAAO,QAAQ,KAAK,yBAAyB;CACjD,IAAI,SAAS,QAAQ,KAAK,2BAA2B;CACrD,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;EAAjD,UAAA,CACG,WAAW,QAAQ,oBAAC,OAAD;GAAK,WAAU;GAA8B,UAAA;EAAa,CAAA,GAC7E,QACE;;AAET,CAAC;AAED,WAAW,cAAc"}

package/dist/components/GreenPanel/index.d.ts

@@ -0,0 +1,3 @@
+export { GreenPanel } from './GreenPanel';
+export type { GreenPanelProps } from './GreenPanel';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/GreenPanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GreenPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}

package/dist/index.d.ts

@@ -14,4 +14,6 @@
  */
 export { GreenButton } from './components/GreenButton';
 export type { GreenButtonProps } from './components/GreenButton';
+export { GreenPanel } from './components/GreenPanel';
+export type { GreenPanelProps } from './components/GreenPanel';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/index.js

@@ -1,2 +1,3 @@
 import { GreenButton } from "./components/GreenButton/GreenButton.js";
-export { GreenButton };
+import { GreenPanel } from "./components/GreenPanel/GreenPanel.js";
+export { GreenButton, GreenPanel };

package/dist/styles/theme.css

@@ -1,122 +1,122 @@
-/*
- * Global Green Steam (VGUI) theme.
- *
- * Only document-level rules live here — the element defaults and shared layout
- * helpers that every component inherits. Anything that belongs to a specific
- * component is colocated with that component instead (see
- * `components/GreenButton/GreenButton.css`).
- *
- * Derived from VGUI.css <https://github.com/AlpyneDreams/vgui.css> (MIT).
- */
-
-body {
-  background-color: #3e4637;
-  font-family: "Trebuchet MS", "Verdana", sans-serif;
-  color: #d8ded3;
-  font-size: 14px;
-  image-rendering: pixelated;
-  margin: 20px 20px;
-}
-
-::selection {
-  background-color: #96892d;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 3px 12px 12px;
-}
-
-h1,
-h2 {
-  color: #c4b550;
-}
-
-h1 {
-  font-size: 18px;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-p {
-  text-align: left;
-  margin: 12px 12px 12px;
-  color: #d8ded3;
-}
-
-a {
-  text-decoration: none;
-  color: #aaaaaa;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-code {
-  background: #3e4637;
-  padding: 0 3px;
-  font-family: monospace;
-}
-
-hr {
-  margin: 20px 0;
-  border: none;
-  height: 1px;
-  background-color: #3e4637;
-}
-
-img {
-  object-fit: contain;
-  margin: 2px;
-  border: solid 2px #7b8484;
-}
-
-fieldset {
-  border-top: solid 1px #292d23;
-  border-bottom: solid 1px #899281;
-  border-left: solid 1px #292d23;
-  border-right: solid 1px #899281;
-}
-
-legend {
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  font-size: 12px;
-  color: white;
-  font-weight: bold;
-}
-
-/* Shared layout helpers */
-
-.flex-row {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-}
-
-.flex-column {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.border {
-  border-top: solid 1px #899281;
-  border-bottom: solid 1px #292d23;
-  border-left: solid 1px #899281;
-  border-right: solid 1px #292d23;
-}
-
-.border-inverted {
-  border-top: solid 1px #292d23;
-  border-bottom: solid 1px #899281;
-  border-left: solid 1px #292d23;
-  border-right: solid 1px #899281;
-}
+/*
+ * Global Green Steam (VGUI) theme.
+ *
+ * Only document-level rules live here — the element defaults and shared layout
+ * helpers that every component inherits. Anything that belongs to a specific
+ * component is colocated with that component instead (see
+ * `components/GreenButton/GreenButton.css`).
+ *
+ * Derived from VGUI.css <https://github.com/AlpyneDreams/vgui.css> (MIT).
+ */
+
+body {
+  background-color: #3e4637;
+  font-family: "Trebuchet MS", "Verdana", sans-serif;
+  color: #d8ded3;
+  font-size: 14px;
+  image-rendering: pixelated;
+  margin: 20px 20px;
+}
+
+::selection {
+  background-color: #96892d;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 3px 12px 12px;
+}
+
+h1,
+h2 {
+  color: #c4b550;
+}
+
+h1 {
+  font-size: 18px;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+p {
+  text-align: left;
+  margin: 12px 12px 12px;
+  color: #d8ded3;
+}
+
+a {
+  text-decoration: none;
+  color: #aaaaaa;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code {
+  background: #3e4637;
+  padding: 0 3px;
+  font-family: monospace;
+}
+
+hr {
+  margin: 20px 0;
+  border: none;
+  height: 1px;
+  background-color: #3e4637;
+}
+
+img {
+  object-fit: contain;
+  margin: 2px;
+  border: solid 2px #7b8484;
+}
+
+fieldset {
+  border-top: solid 1px #292d23;
+  border-bottom: solid 1px #899281;
+  border-left: solid 1px #292d23;
+  border-right: solid 1px #899281;
+}
+
+legend {
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  font-size: 12px;
+  color: white;
+  font-weight: bold;
+}
+
+/* Shared layout helpers */
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.border {
+  border-top: solid 1px #899281;
+  border-bottom: solid 1px #292d23;
+  border-left: solid 1px #899281;
+  border-right: solid 1px #292d23;
+}
+
+.border-inverted {
+  border-top: solid 1px #292d23;
+  border-bottom: solid 1px #899281;
+  border-left: solid 1px #292d23;
+  border-right: solid 1px #899281;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dalcvil/steam-green-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Tree-shakable React components for the classic Green Steam (VGUI) theme.",
   "keywords": [
     "react",
@@ -22,7 +22,6 @@
     "url": "https://github.com/Dalcvi/steam-style-react/issues"
   },
   "type": "module",
-  "packageManager": "pnpm@12.4.1",
   "sideEffects": [
     "**/*.css"
   ],
@@ -41,16 +40,6 @@
     "./styles/theme.css": "./dist/styles/theme.css",
     "./package.json": "./package.json"
   },
-  "scripts": {
-    "build": "vite build && tsc -p tsconfig.build.json",
-    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.node.json",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "changeset": "changeset",
-    "version-packages": "changeset version",
-    "release": "changeset publish",
-    "prepublishOnly": "pnpm run typecheck && pnpm run build"
-  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -70,5 +59,14 @@
     "storybook": "^10.6.0",
     "typescript": "^7.0.2",
     "vite": "^8.3.0"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.node.json",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "changeset publish"
   }
-}
+}