### Run mydraft.cc Development Server

Source: https://github.com/mydraft-cc/ui/blob/master/README.md

This snippet provides the commands to install project dependencies and start the local development server for mydraft.cc. After running these commands, the application will be accessible at `https://localhost:3002`.

```Shell
npm i
npm start
```

--------------------------------

### Build mydraft.cc for Production

Source: https://github.com/mydraft-cc/ui/blob/master/README.md

This snippet outlines the commands to install project dependencies and build the mydraft.cc application for production deployment. The compiled files will be located in the `build` folder, ready to be copied to a web server.

```Shell
npm i
npm run build
```

--------------------------------

### Implementing a Toggle Button Custom Shape in TypeScript

Source: https://github.com/mydraft-cc/ui/blob/master/src/wireframes/shapes/README.md

This TypeScript code defines a `Toggle` custom shape, demonstrating how to implement the `ShapePlugin` interface. It manages appearance properties, defines default size, and configures editable states. The `render` method imperatively draws SVG elements like a pill-shaped bar and a circle, dynamically adjusting their appearance based on the shape's state (Normal or Checked) and properties like colors and stroke thickness.

```TypeScript
const STATE = 'STATE';
const STATE_NORMAL = 'Normal';
const STATE_CHECKED = 'Checked';

const DEFAULT_APPEARANCE = {};
[DefaultAppearance.FOREGROUND_COLOR]: 0x238b45,
[DefaultAppearance.BACKGROUND_COLOR]: 0xbdbdbd,
[DefaultAppearance.TEXT_DISABLED]: true,
[DefaultAppearance.STROKE_COLOR]: 0xffffff,
[DefaultAppearance.STROKE_THICKNESS]: 4,
[STATE]: STATE_CHECKED,

export class Toggle implements ShapePlugin {
    public identifier(): string {
        return 'Toggle';
    }

    public defaultAppearance() {
        return DEFAULT_APPEARANCE;
    }

    public defaultSize() {
        return { x: 60, y: 30 };
    }

    public configurables(factory: ConfigurableFactory) {
        return [
            factory.selection(STATE, 'State', [
                STATE_NORMAL,
                STATE_CHECKED,
            ]),
        ];
    }

    public render(ctx: RenderContext) {
        const border = ctx.shape.strokeThickness;

        const radius = Math.min(ctx.rect.width, ctx.rect.height) * 0.5;

        const isUnchecked = ctx.shape.getAppearance(STATE) === STATE_NORMAL;

        const circleY = ctx.rect.height * 0.5;
        const circleX = isUnchecked ? radius : ctx.rect.width - radius;

        const circleCenter = new Vec2(circleX, circleY);
        const circleSize = radius - border;

        const barColor = isUnchecked ? ctx.shape : ctx.shape.foregroundColor;

        // Pill
        ctx.renderer2.rectangle(0, radius, ctx.rect, p => {
            p.setBackgroundColor(barColor);
        });

        // Circle.
        ctx.renderer2.ellipse(0, Rect2.fromCenter(circleCenter, circleSize), p => {
            p.setBackgroundColor(ctx.shape.strokeColor);
        });
    }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.