@moyarich/console-addon-resizable 0.1.0 → 0.2.0

package/README.md

@@ -2,12 +2,18 @@
 
 Resize the Console panel. Add configurable resize handles, sizing limits, and resize callbacks without changing output behavior.
 
+[Documentation and live examples](https://moyarich.github.io/console/)
+
 ## Install
 
 ```bash
-npm install @moyarich/console @moyarich/console-addon-resizable
+npm install @moyarich/console @moyarich/console-addon-resizable react
 ```
 
+Configure the `@moyarich` scope and authenticate with GitHub Packages as described in the [installation guide](../../../README.md#installation).
+
+Required peer dependencies: `@moyarich/console-core@^0.2.0`, `react@>=18`.
+
 ## Quick start
 
 ```tsx

package/dist/components/ResizableConsoleFrame/ResizableConsoleFrame.d.cts

@@ -0,0 +1,50 @@
+import { type AddonTranslations } from "../../localization.cjs";
+
+import { type CSSProperties, type ReactNode } from "react";
+import type { ConsoleMode } from "@moyarich/console-core";
+export type ConsoleResizeDirection = "vertical" | "horizontal" | "both" | "block" | "inline";
+export type ConsoleResizeEdge = "start" | "end";
+export interface ConsoleResizeSize {
+    width: number;
+    height: number;
+}
+export interface ResizableConsoleAddonOptions {
+    locale?: string;
+    translations?: AddonTranslations;
+    /** Resize axis. Logical block/inline map to vertical/horizontal in the default writing mode. @default "both" */
+    direction?: ConsoleResizeDirection;
+    /** Initial width used when horizontal resizing is active. @default 720 */
+    defaultWidth?: number | string;
+    /** Initial height used when vertical resizing is active. @default 300 */
+    defaultHeight?: number | string;
+    /** Minimum width while dragging. @default 320 */
+    minWidth?: number;
+    /** Minimum height while dragging. @default 180 */
+    minHeight?: number;
+    /** Optional maximum width while dragging. The parent width is always respected. */
+    maxWidth?: number;
+    /** Optional maximum height while dragging. */
+    maxHeight?: number;
+    /** Physical edge that owns the horizontal resize handle. @default "end" */
+    horizontalEdge?: ConsoleResizeEdge;
+    /** Physical edge that owns the vertical resize handle. @default "end" */
+    verticalEdge?: ConsoleResizeEdge;
+    /** Additional class name applied to the addon-owned frame. */
+    className?: string;
+    /** Additional inline styles and CSS custom-property overrides applied to the addon-owned frame. */
+    style?: CSSProperties;
+    /** Called whenever a drag updates the rendered frame size. */
+    onResize?: (size: ConsoleResizeSize) => void;
+}
+interface ResizeAxes {
+    horizontal: boolean;
+    vertical: boolean;
+}
+interface ResizableConsoleFrameProps {
+    mode: ConsoleMode;
+    options: ResizableConsoleAddonOptions;
+    children: ReactNode;
+}
+export declare function resolveConsoleResizeAxes(direction: ConsoleResizeDirection): ResizeAxes;
+export declare function ResizableConsoleFrame({ mode, options, children, }: ResizableConsoleFrameProps): import("react").JSX.Element;
+export {};

package/dist/components/ResizableConsoleFrame/ResizableConsoleFrame.d.ts

@@ -1,4 +1,5 @@
-import "./ResizableConsoleFrame.css";
+import { type AddonTranslations } from "../../localization.js";
+
 import { type CSSProperties, type ReactNode } from "react";
 import type { ConsoleMode } from "@moyarich/console-core";
 export type ConsoleResizeDirection = "vertical" | "horizontal" | "both" | "block" | "inline";
@@ -8,6 +9,8 @@ export interface ConsoleResizeSize {
     height: number;
 }
 export interface ResizableConsoleAddonOptions {
+    locale?: string;
+    translations?: AddonTranslations;
     /** Resize axis. Logical block/inline map to vertical/horizontal in the default writing mode. @default "both" */
     direction?: ConsoleResizeDirection;
     /** Initial width used when horizontal resizing is active. @default 720 */

package/dist/console-addon-resizable.css

@@ -71,16 +71,16 @@
 .console-resizable-frame[data-console-resize-direction="inline"],
 .console-resizable-frame[data-console-resize-direction="both"] {
   width: var(--_console-resizable-width);
-  min-width: var(--_console-resizable-min-width);
-  max-width: var(--_console-resizable-max-width);
+  min-width: min(100%, var(--_console-resizable-min-width));
+  max-width: min(100%, var(--_console-resizable-max-width));
 }
 
 .console-resizable-frame[data-console-resize-direction="vertical"],
 .console-resizable-frame[data-console-resize-direction="block"],
 .console-resizable-frame[data-console-resize-direction="both"] {
   height: var(--_console-resizable-height);
-  min-height: var(--_console-resizable-min-height);
-  max-height: var(--_console-resizable-max-height);
+  min-height: min(100%, var(--_console-resizable-min-height));
+  max-height: min(100%, var(--_console-resizable-max-height));
 }
 
 .console-resizable-frame-content {

package/dist/index.cjs

@@ -4,6 +4,71 @@ const jsxRuntime = require("react/jsx-runtime");
 const lucideReact = require("lucide-react");
 const react = require("react");
 const consoleCore = require("@moyarich/console-core");
+const horizontal$3 = "Resize console horizontally";
+const horizontalTitle$3 = "Drag to resize horizontally";
+const vertical$3 = "Resize console vertically";
+const verticalTitle$3 = "Drag to resize vertically";
+const both$3 = "Resize console in both directions";
+const bothTitle$3 = "Drag to resize width and height";
+const en = {
+  horizontal: horizontal$3,
+  horizontalTitle: horizontalTitle$3,
+  vertical: vertical$3,
+  verticalTitle: verticalTitle$3,
+  both: both$3,
+  bothTitle: bothTitle$3
+};
+const horizontal$2 = "Redimensionar horizontalmente";
+const horizontalTitle$2 = "Arrastrar para cambiar el ancho";
+const vertical$2 = "Redimensionar verticalmente";
+const verticalTitle$2 = "Arrastrar para cambiar la altura";
+const both$2 = "Redimensionar en ambas direcciones";
+const bothTitle$2 = "Arrastrar para cambiar ancho y altura";
+const es = {
+  horizontal: horizontal$2,
+  horizontalTitle: horizontalTitle$2,
+  vertical: vertical$2,
+  verticalTitle: verticalTitle$2,
+  both: both$2,
+  bothTitle: bothTitle$2
+};
+const horizontal$1 = "Redimensionner horizontalement";
+const horizontalTitle$1 = "Glisser pour modifier la largeur";
+const vertical$1 = "Redimensionner verticalement";
+const verticalTitle$1 = "Glisser pour modifier la hauteur";
+const both$1 = "Redimensionner dans les deux sens";
+const bothTitle$1 = "Glisser pour modifier largeur et hauteur";
+const fr = {
+  horizontal: horizontal$1,
+  horizontalTitle: horizontalTitle$1,
+  vertical: vertical$1,
+  verticalTitle: verticalTitle$1,
+  both: both$1,
+  bothTitle: bothTitle$1
+};
+const horizontal = "Redimensionar o console horizontalmente";
+const horizontalTitle = "Arraste para redimensionar horizontalmente";
+const vertical = "Redimensionar o console verticalmente";
+const verticalTitle = "Arraste para redimensionar verticalmente";
+const both = "Redimensionar o console nas duas direções";
+const bothTitle = "Arraste para alterar a largura e a altura";
+const pt = {
+  horizontal,
+  horizontalTitle,
+  vertical,
+  verticalTitle,
+  both,
+  bothTitle
+};
+const locales = { en, es, fr, pt };
+function resolveAddonMessages(locale = "en", overrides) {
+  const tag = locale.replace(/_/g, "-").toLowerCase();
+  return {
+    ...en,
+    ...locales[tag] ?? locales[tag.split("-")[0]] ?? {},
+    ...overrides
+  };
+}
 function resolveConsoleResizeAxes(direction) {
   return {
     horizontal: direction === "horizontal" || direction === "both" || direction === "inline",
@@ -36,8 +101,11 @@ function ResizableConsoleFrame({
     verticalEdge = "end",
     className = "",
     style,
-    onResize
+    onResize,
+    locale = "en",
+    translations
   } = options;
+  const labels = resolveAddonMessages(locale, translations);
   const axes = resolveConsoleResizeAxes(direction);
   const frameRef = react.useRef(null);
   const dragRef = react.useRef(null);
@@ -148,6 +216,38 @@ function ResizableConsoleFrame({
       height: nextHeight
     });
   };
+  const resizeWithKeyboard = (event, axis) => {
+    const horizontal2 = axis !== "vertical" && (event.key === "ArrowLeft" || event.key === "ArrowRight");
+    const vertical2 = axis !== "horizontal" && (event.key === "ArrowUp" || event.key === "ArrowDown");
+    const frame = frameRef.current;
+    if (!frame || !horizontal2 && !vertical2) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const bounds = frame.getBoundingClientRect();
+    const parentWidth = frame.parentElement?.getBoundingClientRect().width ?? Infinity;
+    const step = event.shiftKey ? 50 : 10;
+    let nextWidth = bounds.width;
+    let nextHeight = bounds.height;
+    if (horizontal2) {
+      const sign = (event.key === "ArrowRight" ? 1 : -1) * (horizontalEdge === "end" ? 1 : -1);
+      nextWidth = clamp(
+        bounds.width + sign * step,
+        minWidth,
+        Math.min(maxWidth ?? parentWidth, parentWidth)
+      );
+      setWidth(nextWidth);
+    }
+    if (vertical2) {
+      const sign = (event.key === "ArrowDown" ? 1 : -1) * (verticalEdge === "end" ? 1 : -1);
+      nextHeight = clamp(
+        bounds.height + sign * step,
+        minHeight,
+        maxHeight ?? Infinity
+      );
+      setHeight(nextHeight);
+    }
+    onResize?.({ width: nextWidth, height: nextHeight });
+  };
   const renderHorizontalHandle = () => {
     if (!axes.horizontal) {
       return null;
@@ -158,10 +258,14 @@ function ResizableConsoleFrame({
         className: "console-resize-handle",
         role: "separator",
         "aria-orientation": "vertical",
-        "aria-label": "Resize console horizontally",
-        title: "Drag to resize horizontally",
+        "aria-valuemin": minWidth,
+        "aria-valuemax": maxWidth,
+        "aria-valuenow": typeof width === "number" ? width : void 0,
+        "aria-label": labels.horizontal,
+        title: labels.horizontalTitle,
         tabIndex: 0,
         "data-console-resize-axis": "horizontal",
+        onKeyDown: (event) => resizeWithKeyboard(event, "horizontal"),
         "data-active": activeAxis === "horizontal" || void 0,
         onPointerDown: (event) => startResize(event, "horizontal"),
         onPointerMove: moveResize,
@@ -181,10 +285,14 @@ function ResizableConsoleFrame({
         className: "console-resize-handle",
         role: "separator",
         "aria-orientation": "horizontal",
-        "aria-label": "Resize console vertically",
-        title: "Drag to resize vertically",
+        "aria-valuemin": minHeight,
+        "aria-valuemax": maxHeight,
+        "aria-valuenow": typeof height === "number" ? height : void 0,
+        "aria-label": labels.vertical,
+        title: labels.verticalTitle,
         tabIndex: 0,
         "data-console-resize-axis": "vertical",
+        onKeyDown: (event) => resizeWithKeyboard(event, "vertical"),
         "data-active": activeAxis === "vertical" || void 0,
         onPointerDown: (event) => startResize(event, "vertical"),
         onPointerMove: moveResize,
@@ -203,10 +311,11 @@ function ResizableConsoleFrame({
       {
         className: "console-resize-corner-handle",
         role: "separator",
-        "aria-label": "Resize console in both directions",
-        title: "Drag to resize width and height",
+        "aria-label": labels.both,
+        title: labels.bothTitle,
         tabIndex: 0,
         "data-console-resize-axis": "both",
+        onKeyDown: (event) => resizeWithKeyboard(event, "both"),
         "data-active": activeAxis === "both" || void 0,
         onPointerDown: (event) => startResize(event, "both"),
         onPointerMove: moveResize,

package/dist/index.d.cts

@@ -0,0 +1,13 @@
+/** Stable package-qualified identity for the resizable frame addon. */
+export declare const RESIZABLE_CONSOLE_ADDON_ID = "@moyarich/console-addon-resizable";
+export { resolveConsoleResizeAxes } from "./components/ResizableConsoleFrame/ResizableConsoleFrame.cjs";
+export type { ConsoleResizeDirection, ConsoleResizeEdge, ConsoleResizeSize, ResizableConsoleAddonOptions, } from "./components/ResizableConsoleFrame/ResizableConsoleFrame.cjs";
+import type { ResizableConsoleAddonOptions } from "./components/ResizableConsoleFrame/ResizableConsoleFrame.cjs";
+import { type ConsoleAddon } from "@moyarich/console-core";
+/**
+ * Creates a first-party frame-resizing addon.
+ *
+ * The addon contributes a generic frame decorator and leaves message/output
+ * rendering, viewport state, and host layout ownership unchanged.
+ */
+export declare function createResizableConsoleAddon(options?: ResizableConsoleAddonOptions): ConsoleAddon;

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 /** Stable package-qualified identity for the resizable frame addon. */
 export declare const RESIZABLE_CONSOLE_ADDON_ID = "@moyarich/console-addon-resizable";
-export { resolveConsoleResizeAxes } from "./components/ResizableConsoleFrame/ResizableConsoleFrame";
-export type { ConsoleResizeDirection, ConsoleResizeEdge, ConsoleResizeSize, ResizableConsoleAddonOptions, } from "./components/ResizableConsoleFrame/ResizableConsoleFrame";
-import type { ResizableConsoleAddonOptions } from "./components/ResizableConsoleFrame/ResizableConsoleFrame";
+export { resolveConsoleResizeAxes } from "./components/ResizableConsoleFrame/ResizableConsoleFrame.js";
+export type { ConsoleResizeDirection, ConsoleResizeEdge, ConsoleResizeSize, ResizableConsoleAddonOptions, } from "./components/ResizableConsoleFrame/ResizableConsoleFrame.js";
+import type { ResizableConsoleAddonOptions } from "./components/ResizableConsoleFrame/ResizableConsoleFrame.js";
 import { type ConsoleAddon } from "@moyarich/console-core";
 /**
  * Creates a first-party frame-resizing addon.

package/dist/index.js

@@ -2,6 +2,71 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { GripVertical, GripHorizontal, MoveDiagonal2 } from "lucide-react";
 import { useRef, useState, useCallback, useEffect } from "react";
 import { consoleExtensionPoints } from "@moyarich/console-core";
+const horizontal$3 = "Resize console horizontally";
+const horizontalTitle$3 = "Drag to resize horizontally";
+const vertical$3 = "Resize console vertically";
+const verticalTitle$3 = "Drag to resize vertically";
+const both$3 = "Resize console in both directions";
+const bothTitle$3 = "Drag to resize width and height";
+const en = {
+  horizontal: horizontal$3,
+  horizontalTitle: horizontalTitle$3,
+  vertical: vertical$3,
+  verticalTitle: verticalTitle$3,
+  both: both$3,
+  bothTitle: bothTitle$3
+};
+const horizontal$2 = "Redimensionar horizontalmente";
+const horizontalTitle$2 = "Arrastrar para cambiar el ancho";
+const vertical$2 = "Redimensionar verticalmente";
+const verticalTitle$2 = "Arrastrar para cambiar la altura";
+const both$2 = "Redimensionar en ambas direcciones";
+const bothTitle$2 = "Arrastrar para cambiar ancho y altura";
+const es = {
+  horizontal: horizontal$2,
+  horizontalTitle: horizontalTitle$2,
+  vertical: vertical$2,
+  verticalTitle: verticalTitle$2,
+  both: both$2,
+  bothTitle: bothTitle$2
+};
+const horizontal$1 = "Redimensionner horizontalement";
+const horizontalTitle$1 = "Glisser pour modifier la largeur";
+const vertical$1 = "Redimensionner verticalement";
+const verticalTitle$1 = "Glisser pour modifier la hauteur";
+const both$1 = "Redimensionner dans les deux sens";
+const bothTitle$1 = "Glisser pour modifier largeur et hauteur";
+const fr = {
+  horizontal: horizontal$1,
+  horizontalTitle: horizontalTitle$1,
+  vertical: vertical$1,
+  verticalTitle: verticalTitle$1,
+  both: both$1,
+  bothTitle: bothTitle$1
+};
+const horizontal = "Redimensionar o console horizontalmente";
+const horizontalTitle = "Arraste para redimensionar horizontalmente";
+const vertical = "Redimensionar o console verticalmente";
+const verticalTitle = "Arraste para redimensionar verticalmente";
+const both = "Redimensionar o console nas duas direções";
+const bothTitle = "Arraste para alterar a largura e a altura";
+const pt = {
+  horizontal,
+  horizontalTitle,
+  vertical,
+  verticalTitle,
+  both,
+  bothTitle
+};
+const locales = { en, es, fr, pt };
+function resolveAddonMessages(locale = "en", overrides) {
+  const tag = locale.replace(/_/g, "-").toLowerCase();
+  return {
+    ...en,
+    ...locales[tag] ?? locales[tag.split("-")[0]] ?? {},
+    ...overrides
+  };
+}
 function resolveConsoleResizeAxes(direction) {
   return {
     horizontal: direction === "horizontal" || direction === "both" || direction === "inline",
@@ -34,8 +99,11 @@ function ResizableConsoleFrame({
     verticalEdge = "end",
     className = "",
     style,
-    onResize
+    onResize,
+    locale = "en",
+    translations
   } = options;
+  const labels = resolveAddonMessages(locale, translations);
   const axes = resolveConsoleResizeAxes(direction);
   const frameRef = useRef(null);
   const dragRef = useRef(null);
@@ -146,6 +214,38 @@ function ResizableConsoleFrame({
       height: nextHeight
     });
   };
+  const resizeWithKeyboard = (event, axis) => {
+    const horizontal2 = axis !== "vertical" && (event.key === "ArrowLeft" || event.key === "ArrowRight");
+    const vertical2 = axis !== "horizontal" && (event.key === "ArrowUp" || event.key === "ArrowDown");
+    const frame = frameRef.current;
+    if (!frame || !horizontal2 && !vertical2) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const bounds = frame.getBoundingClientRect();
+    const parentWidth = frame.parentElement?.getBoundingClientRect().width ?? Infinity;
+    const step = event.shiftKey ? 50 : 10;
+    let nextWidth = bounds.width;
+    let nextHeight = bounds.height;
+    if (horizontal2) {
+      const sign = (event.key === "ArrowRight" ? 1 : -1) * (horizontalEdge === "end" ? 1 : -1);
+      nextWidth = clamp(
+        bounds.width + sign * step,
+        minWidth,
+        Math.min(maxWidth ?? parentWidth, parentWidth)
+      );
+      setWidth(nextWidth);
+    }
+    if (vertical2) {
+      const sign = (event.key === "ArrowDown" ? 1 : -1) * (verticalEdge === "end" ? 1 : -1);
+      nextHeight = clamp(
+        bounds.height + sign * step,
+        minHeight,
+        maxHeight ?? Infinity
+      );
+      setHeight(nextHeight);
+    }
+    onResize?.({ width: nextWidth, height: nextHeight });
+  };
   const renderHorizontalHandle = () => {
     if (!axes.horizontal) {
       return null;
@@ -156,10 +256,14 @@ function ResizableConsoleFrame({
         className: "console-resize-handle",
         role: "separator",
         "aria-orientation": "vertical",
-        "aria-label": "Resize console horizontally",
-        title: "Drag to resize horizontally",
+        "aria-valuemin": minWidth,
+        "aria-valuemax": maxWidth,
+        "aria-valuenow": typeof width === "number" ? width : void 0,
+        "aria-label": labels.horizontal,
+        title: labels.horizontalTitle,
         tabIndex: 0,
         "data-console-resize-axis": "horizontal",
+        onKeyDown: (event) => resizeWithKeyboard(event, "horizontal"),
         "data-active": activeAxis === "horizontal" || void 0,
         onPointerDown: (event) => startResize(event, "horizontal"),
         onPointerMove: moveResize,
@@ -179,10 +283,14 @@ function ResizableConsoleFrame({
         className: "console-resize-handle",
         role: "separator",
         "aria-orientation": "horizontal",
-        "aria-label": "Resize console vertically",
-        title: "Drag to resize vertically",
+        "aria-valuemin": minHeight,
+        "aria-valuemax": maxHeight,
+        "aria-valuenow": typeof height === "number" ? height : void 0,
+        "aria-label": labels.vertical,
+        title: labels.verticalTitle,
         tabIndex: 0,
         "data-console-resize-axis": "vertical",
+        onKeyDown: (event) => resizeWithKeyboard(event, "vertical"),
         "data-active": activeAxis === "vertical" || void 0,
         onPointerDown: (event) => startResize(event, "vertical"),
         onPointerMove: moveResize,
@@ -201,10 +309,11 @@ function ResizableConsoleFrame({
       {
         className: "console-resize-corner-handle",
         role: "separator",
-        "aria-label": "Resize console in both directions",
-        title: "Drag to resize width and height",
+        "aria-label": labels.both,
+        title: labels.bothTitle,
         tabIndex: 0,
         "data-console-resize-axis": "both",
+        onKeyDown: (event) => resizeWithKeyboard(event, "both"),
         "data-active": activeAxis === "both" || void 0,
         onPointerDown: (event) => startResize(event, "both"),
         onPointerMove: moveResize,

package/dist/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "horizontal": "Resize console horizontally",
+  "horizontalTitle": "Drag to resize horizontally",
+  "vertical": "Resize console vertically",
+  "verticalTitle": "Drag to resize vertically",
+  "both": "Resize console in both directions",
+  "bothTitle": "Drag to resize width and height"
+}

package/dist/locales/es.json

@@ -0,0 +1,8 @@
+{
+  "horizontal": "Redimensionar horizontalmente",
+  "horizontalTitle": "Arrastrar para cambiar el ancho",
+  "vertical": "Redimensionar verticalmente",
+  "verticalTitle": "Arrastrar para cambiar la altura",
+  "both": "Redimensionar en ambas direcciones",
+  "bothTitle": "Arrastrar para cambiar ancho y altura"
+}

package/dist/locales/fr.json

@@ -0,0 +1,8 @@
+{
+  "horizontal": "Redimensionner horizontalement",
+  "horizontalTitle": "Glisser pour modifier la largeur",
+  "vertical": "Redimensionner verticalement",
+  "verticalTitle": "Glisser pour modifier la hauteur",
+  "both": "Redimensionner dans les deux sens",
+  "bothTitle": "Glisser pour modifier largeur et hauteur"
+}

package/dist/locales/pt.json

@@ -0,0 +1,8 @@
+{
+  "horizontal": "Redimensionar o console horizontalmente",
+  "horizontalTitle": "Arraste para redimensionar horizontalmente",
+  "vertical": "Redimensionar o console verticalmente",
+  "verticalTitle": "Arraste para redimensionar verticalmente",
+  "both": "Redimensionar o console nas duas direções",
+  "bothTitle": "Arraste para alterar a largura e a altura"
+}

package/dist/localization.d.cts

@@ -0,0 +1,3 @@
+import en from "./locales/en.json";
+export type AddonTranslations = Partial<typeof en>;
+export declare function resolveAddonMessages(locale?: string, overrides?: AddonTranslations): typeof en;

package/dist/localization.d.ts

@@ -0,0 +1,3 @@
+import en from "./locales/en.json";
+export type AddonTranslations = Partial<typeof en>;
+export declare function resolveAddonMessages(locale?: string, overrides?: AddonTranslations): typeof en;

package/dist/styles.css

@@ -0,0 +1,294 @@
+/* src/components/ResizableConsoleFrame/ResizableConsoleFrame.css */
+/* ==========================================================================
+   Resizable console addon
+   ========================================================================== */
+
+.console-resizable-frame,
+.console-resizable-frame *,
+.console-resizable-frame *::before,
+.console-resizable-frame *::after {
+  box-sizing: border-box;
+}
+
+.console-resizable-frame {
+  --_console-resize-color-scheme: var(
+    --console-resize-color-scheme,
+    var(--console-panel-color-scheme, var(--console-color-scheme, inherit))
+  );
+  --_console-resize-separator-line-background-color: var(
+    --console-resize-separator-line-background-color,
+    color-mix(in oklab, currentColor 18%, transparent)
+  );
+  --_console-resize-separator-hover-line-background-color: var(
+    --console-resize-separator-hover-line-background-color,
+    color-mix(in oklab, currentColor 38%, transparent)
+  );
+  --_console-resize-separator-active-line-background-color: var(
+    --console-resize-separator-active-line-background-color,
+    light-dark(#635bff, #8b83ff)
+  );
+  --_console-resize-separator-grip-color: var(
+    --console-resize-separator-grip-color,
+    color-mix(in oklab, currentColor 58%, transparent)
+  );
+  --_console-resize-separator-active-grip-color: var(
+    --console-resize-separator-active-grip-color,
+    light-dark(#635bff, #8b83ff)
+  );
+  --_console-resize-separator-grip-border: var(
+    --console-resize-separator-grip-border,
+    1px solid color-mix(in oklab, currentColor 18%, transparent)
+  );
+  --_console-resize-separator-grip-background-color: var(
+    --console-resize-separator-grip-background-color,
+    light-dark(
+      color-mix(in oklab, white 96%, currentColor 4%),
+      color-mix(in oklab, #111113 94%, currentColor 6%)
+    )
+  );
+  --_console-resize-separator-grip-border-radius: var(
+    --console-resize-separator-grip-border-radius,
+    999px
+  );
+  --_console-resize-separator-grip-box-shadow: var(
+    --console-resize-separator-grip-box-shadow,
+    0 4px 14px color-mix(in oklab, currentColor 14%, transparent)
+  );
+  --_console-resize-handle-size: var(--console-resize-handle-size, 10px);
+  --_console-resize-corner-size: var(--console-resize-corner-size, 28px);
+
+  color-scheme: var(--_console-resize-color-scheme);
+  position: relative;
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+}
+
+.console-resizable-frame[data-console-resize-direction="horizontal"],
+.console-resizable-frame[data-console-resize-direction="inline"],
+.console-resizable-frame[data-console-resize-direction="both"] {
+  width: var(--_console-resizable-width);
+  min-width: min(100%, var(--_console-resizable-min-width));
+  max-width: min(100%, var(--_console-resizable-max-width));
+}
+
+.console-resizable-frame[data-console-resize-direction="vertical"],
+.console-resizable-frame[data-console-resize-direction="block"],
+.console-resizable-frame[data-console-resize-direction="both"] {
+  height: var(--_console-resizable-height);
+  min-height: min(100%, var(--_console-resizable-min-height));
+  max-height: min(100%, var(--_console-resizable-max-height));
+}
+
+.console-resizable-frame-content {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.console-resize-handle {
+  position: absolute;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--_console-resize-separator-grip-color);
+  outline: none;
+  touch-action: none;
+}
+
+.console-resize-handle[data-console-resize-axis="horizontal"] {
+  top: 0;
+  width: var(--_console-resize-handle-size);
+  height: 100%;
+  cursor: col-resize;
+}
+
+.console-resizable-frame[data-console-resize-horizontal-edge="end"]
+  > .console-resize-handle[data-console-resize-axis="horizontal"] {
+  right: calc(var(--_console-resize-handle-size) / -2);
+}
+
+.console-resizable-frame[data-console-resize-horizontal-edge="start"]
+  > .console-resize-handle[data-console-resize-axis="horizontal"] {
+  left: calc(var(--_console-resize-handle-size) / -2);
+}
+
+.console-resize-handle[data-console-resize-axis="vertical"] {
+  left: 0;
+  width: 100%;
+  height: var(--_console-resize-handle-size);
+  cursor: row-resize;
+}
+
+.console-resizable-frame[data-console-resize-vertical-edge="end"]
+  > .console-resize-handle[data-console-resize-axis="vertical"] {
+  bottom: calc(var(--_console-resize-handle-size) / -2);
+}
+
+.console-resizable-frame[data-console-resize-vertical-edge="start"]
+  > .console-resize-handle[data-console-resize-axis="vertical"] {
+  top: calc(var(--_console-resize-handle-size) / -2);
+}
+
+.console-resize-handle::before {
+  position: absolute;
+  background: var(--_console-resize-separator-line-background-color);
+  content: "";
+  pointer-events: none;
+  transition: background 120ms ease;
+  margin-top: -1px;
+  border-radius: 6px;
+  opacity: 0;
+}
+
+.console-resize-handle[data-console-resize-axis="horizontal"]::before {
+  width: 5px;
+  height: 90%;
+}
+
+.console-resize-handle[data-console-resize-axis="vertical"]::before {
+  width: 90%;
+  height: 5px;
+}
+
+.console-resize-handle:hover::before,
+.console-resize-handle:focus-visible::before {
+  background: var(--_console-resize-separator-hover-line-background-color);
+  opacity: 1;
+}
+
+.console-resize-handle[data-active="true"]::before {
+  background: var(--_console-resize-separator-active-line-background-color);
+}
+
+.console-resize-grip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: var(--_console-resize-separator-grip-border-radius);
+  background: transparent;
+  box-shadow: none;
+  color: inherit;
+  opacity: 0.55;
+  pointer-events: none;
+  transition:
+    opacity 120ms ease,
+    background 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    color 120ms ease;
+}
+
+.console-resize-handle[data-console-resize-axis="horizontal"]
+  > .console-resize-grip {
+  width: 22px;
+  height: 34px;
+}
+
+.console-resize-handle[data-console-resize-axis="vertical"]
+  > .console-resize-grip {
+  width: 34px;
+  height: 22px;
+}
+
+.console-resize-handle:hover > .console-resize-grip,
+.console-resize-handle:focus-visible > .console-resize-grip,
+.console-resize-handle[data-active="true"] > .console-resize-grip {
+  border: var(--_console-resize-separator-grip-border);
+  background: var(--_console-resize-separator-grip-background-color);
+  box-shadow: var(--_console-resize-separator-grip-box-shadow);
+  opacity: 1;
+}
+
+.console-resize-handle[data-active="true"] > .console-resize-grip {
+  color: var(--_console-resize-separator-active-grip-color);
+}
+
+.console-resize-corner-handle {
+  position: absolute;
+  z-index: 4;
+  display: flex;
+  width: var(--_console-resize-corner-size);
+  height: var(--_console-resize-corner-size);
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  box-shadow: none;
+  color: var(--_console-resize-separator-grip-color);
+  opacity: 0.65;
+  outline: none;
+  touch-action: none;
+  transition:
+    opacity 120ms ease,
+    background 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    color 120ms ease;
+}
+
+.console-resizable-frame[data-console-resize-horizontal-edge="end"]
+  > .console-resize-corner-handle {
+  right: -4px;
+}
+
+.console-resizable-frame[data-console-resize-horizontal-edge="start"]
+  > .console-resize-corner-handle {
+  left: -4px;
+}
+
+.console-resizable-frame[data-console-resize-vertical-edge="end"]
+  > .console-resize-corner-handle {
+  bottom: -4px;
+}
+
+.console-resizable-frame[data-console-resize-vertical-edge="start"]
+  > .console-resize-corner-handle {
+  top: -4px;
+}
+
+.console-resizable-frame[data-console-resize-horizontal-edge="end"][data-console-resize-vertical-edge="end"]
+  > .console-resize-corner-handle,
+.console-resizable-frame[data-console-resize-horizontal-edge="start"][data-console-resize-vertical-edge="start"]
+  > .console-resize-corner-handle {
+  cursor: nwse-resize;
+}
+
+.console-resizable-frame[data-console-resize-horizontal-edge="end"][data-console-resize-vertical-edge="start"]
+  > .console-resize-corner-handle,
+.console-resizable-frame[data-console-resize-horizontal-edge="start"][data-console-resize-vertical-edge="end"]
+  > .console-resize-corner-handle {
+  cursor: nesw-resize;
+}
+
+.console-resize-corner-handle:hover,
+.console-resize-corner-handle:focus-visible,
+.console-resize-corner-handle[data-active="true"] {
+  border: var(--_console-resize-separator-grip-border);
+  background: var(--_console-resize-separator-grip-background-color);
+  box-shadow: var(--_console-resize-separator-grip-box-shadow);
+  opacity: 1;
+}
+
+.console-resize-corner-handle[data-active="true"] {
+  color: var(--_console-resize-separator-active-grip-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .console-resize-handle::before,
+  .console-resize-grip,
+  .console-resize-corner-handle {
+    transition: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moyarich/console-addon-resizable",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "First-party resizable frame addon for @moyarich/console hosts.",
   "license": "MIT",
   "type": "module",
@@ -9,33 +9,36 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "development": "./src/index.tsx",
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
-    "./styles.css": "./src/styles.css"
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
-    "dist",
-    "src/styles.css"
+    "dist"
   ],
   "publishConfig": {
     "registry": "https://npm.pkg.github.com"
   },
   "scripts": {
-    "build": "vite build && tsc -p tsconfig.build.json",
+    "build": "vite build && tsc -p tsconfig.build.json && node ../../../scripts/prepare-cjs-types.mjs && node ../../../scripts/prepare-addon-styles.mjs",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "lucide-react": "^1.47.0"
   },
   "peerDependencies": {
-    "@moyarich/console-core": "^0.1.0",
+    "@moyarich/console-core": "^0.2.0",
     "react": ">=18"
   },
   "devDependencies": {
-    "@moyarich/console-core": "0.1.0",
+    "@moyarich/console-core": "0.2.0",
     "@types/react": "^19.1.12",
     "react": "^19.2.7",
     "typescript": "^5.9.2",
@@ -60,9 +63,13 @@
     "./src/index.tsx",
     "./src/components/ResizableConsoleFrame/ResizableConsoleFrame.css",
     "./dist/index.js",
-    "./dist/index.cjs"
+    "./dist/index.cjs",
+    "./dist/styles.css"
   ],
   "publisher": "moyarich",
   "author": "Moya Richards",
+  "engines": {
+    "node": ">=24"
+  },
   "private": false
 }